What it is
Spectrum UI is a free collection of React components built on shadcn/ui, Tailwind CSS, and Motion. Nothing is hidden behind a package. The source lands in your project, and from there it's yours to change.
There are 250+ components in the docs today, plus page blocks and a few full templates. Every one has a live preview and its code sitting right underneath.
Getting a component
Pick whichever way suits you.
Ask your editor. Connect the MCP server once and Claude Code, Cursor, or Windsurf can browse and install components for you:
claude mcp add spectrum-ui -- npx -y @spectrumui/mcp
Then just say what you want: "add the kanban board and animated drawer to my project." Setup for the other editors is in the MCP docs.
Use the shadcn CLI. If your project already has shadcn/ui set up:
npx shadcn@latest add @spectrumui/animated-drawer
Copy it. Open a component page, hit copy, paste it in. That works too.
What's in here
- Components — forms, cards, buttons, ratings, overlays, media, auth, feedback
- Blocks — hero, pricing, FAQ, CTA and footer sections
- Templates — dashboards and landing pages you can lift wholesale
- Colors — a palette browser at /colors
Running it locally
Only needed if you want to work on the site itself.
git clone https://github.com/arihantcodes/spectrum-ui.git
cd spectrum-ui
yarn install
yarn dev
That's localhost:3000. Docs, components, and the registry all work out of the box. Auth, payments, and bookmarks need keys in a .env file, so those pages will be quiet until you add them.
| Command | Does |
|---|
yarn dev | Dev server |
yarn build | Production build |
yarn lint | ESLint |
yarn test | Checks the registry, catalog, metadata, and structured data line up |
Built with Next.js 14 (App Router), TypeScript, Tailwind, Radix, and Motion. Supabase and NextAuth handle accounts, Resend sends email, and it all ships on Vercel.
Contributing
New components, fixes, docs — all welcome.
A component is a few files: the source in components/spectrumui/, a docs page under app/(docs)/docs/, registry entries in registry.json and public/r/, and a line in content/component-catalog.json. The fastest route is to copy an existing component and follow its shape.
Run yarn test before opening a PR. It'll tell you if anything is out of sync.
Missing a component you need? Open an issue and say so.
Contributors
License
Apache 2.0. See LICENSE.
Made by Arihant and everyone above.
