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.

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.