Spectrum UI

Animated React components you can copy, install with the shadcn CLI,
or just ask your AI editor for.

· · ·

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:

bash
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 .

Use the shadcn CLI. If your project already has shadcn/ui set up:

bash
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

Running it locally

Only needed if you want to work on the site itself.

bash
git clone https://github.com/arihantcodes/spectrum-ui.gitcd spectrum-uiyarn installyarn dev

That's . 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.

CommandDoes
yarn devDev server
yarn buildProduction build
yarn lintESLint
yarn testChecks 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? and say so.

Contributors

License

Apache 2.0. See LICENSE [blocked].


Made by and everyone above.