Getting Started

Guides

Short guides that help you learn Spectrum UI and get more out of it.

Start hereInstall Spectrum UISet up Next.js and shadcn/ui, then add your first component in a few minutes.ComponentsExplore the componentsBrowse the full list of components and copy the ones you need.AI toolsSet up the MCP serverConnect your AI editor so it can search and add components for you.StylingMake it your ownEdit the copied code and change the styles to match your brand.

Topic guides

Learn a UI category, compare when to use it, browse matching Spectrum UI components, and start from a working code example.

React Component LibraryReact Block LibraryTailwind Component LibraryNext.js UI LibraryMotion ComponentsAnimation LibraryDashboard ComponentsLanding Page ComponentsHero SectionsPricing SectionsAuthentication ComponentsAI UI Components

What you will learn

  • How to add Spectrum UI components to a React or Next.js app
  • How to keep your pages fast and easy to use for everyone
  • How to change a component so it matches your design
  • Patterns that real production apps use
  • How to work faster with AI tools like the MCP server

Why Spectrum UI?

Spectrum UI is a collection of React components for modern web apps. It is built with TypeScript and Tailwind CSS, and it cares about accessibility from the start. You get beautiful and responsive interfaces without writing all the boilerplate yourself. And since the code lives in your project, there is nothing extra to maintain.

Popular pages

InstallationAccordionButtonCard