Spectrum UI

项目地址：https://github.com/arihantcodes/spectrum-ui

这是什么

Spectrum UI 是一个基于 shadcn/ui、Tailwind CSS 和 Motion 构建的免费 React 组件集合。没有任何东西被封装在包里藏起来——源码直接进入你的项目，从那一刻起，想怎么改就怎么改。

目前文档中收录了 250 个组件，此外还有页面区块（Blocks）和若干完整模板。每个组件都提供在线实时预览，代码就摆在预览下方。

获取组件

选择适合自己的方式即可。

让编辑器代劳。 连接一次 MCP 服务器，Claude Code、Cursor 或 Windsurf 就能帮你浏览和安装组件：

claude mcp add spectrum-ui -- npx -y @spectrumui/mcp

然后直接说出你的需求，比如："给我的项目加上看板（kanban board）和动画抽屉（animated drawer）。" 其他编辑器的配置方法见 MCP 文档。

使用 shadcn CLI。 如果你的项目已经配置好 shadcn/ui：

npx shadcn@latest add @spectrumui/animated-drawer

直接复制。 打开组件页面，点击复制，粘贴到项目里。这也是完全可行的。

这里有什么

组件（Components）——表单、卡片、按钮、评分、浮层、媒体、认证、反馈

区块（Blocks）——Hero、定价、FAQ、CTA 和页脚版块

模板（Templates）——可整套搬走的仪表盘和落地页

配色（Colors）——调色板浏览器，见 /colors

本地运行

仅当你想参与开发本站本身时才需要。

git clone https://github.com/arihantcodes/spectrum-ui.git
cd spectrum-ui
yarn install
yarn dev

访问 localhost:3000 即可。文档、组件和 registry 开箱即用。认证、支付和书签功能需要在 .env 文件中配置密钥，未配置之前相关页面不会展示内容。

命令	作用
`yarn dev`	启动开发服务器
`yarn build`	生产环境构建
`yarn lint`	运行 ESLint
`yarn test`	校验 registry、目录、元数据和结构化数据是否一致

本项目基于 Next.js 14（App Router）、TypeScript、Tailwind、Radix 和 Motion 构建。账户体系由 Supabase 和 NextAuth 提供，邮件发送使用 Resend，整体部署在 Vercel 上。

参与贡献

新组件、Bug 修复、文档改进——统统欢迎。

一个组件通常由以下几部分组成：components/spectrumui/ 中的源码、app/(docs)/docs/ 下的文档页面、registry.json 和 public/r/ 中的 registry 条目，以及 content/component-catalog.json 中的一行记录。最快的方式是复制一个现有组件，照着它的结构来写。

提交 PR 之前请先运行 yarn test，它会告诉你是否有地方不同步。

缺少你需要的组件？提一个 issue 告诉我们。