状态：推荐收藏 · 适合找设计起点和可复用交互
速读#
21st.dev Community 是一个面向 React 和 Next.js 的社区组件目录。Hero、按钮、定价、AI Chat、表单、卡片、导航、图表、动效背景等分类都可以直接搜索和预览，再复制或 remix 到自己的项目。
我更愿意把它叫作「组件搜索引擎」，而不是另一套 UI 框架。它最有价值的时刻，是你知道页面需要什么功能，却不想从空白画布开始。先找到一个接近的交互和结构，再把代码收进自己的设计系统，比安装一个包后永远跟着它的 API 走更自由。
推荐它解决的三个问题#
1. 不知道从哪里开始#
「做一个好看的 Hero」太宽，盯着空文件很容易来回试色。21st.dev 先给出大量真实结果，可以快速判断自己要的是滚动展开、极简文案、视频背景还是带产品截图的结构。
2. 动效细节难从截图还原#
很多组件的价值不在静态外观，而在 hover、进入动画、滚动响应和状态切换。在线预览比只看设计稿更容易确认交互是否值得采用。
3. 不想被整套组件库绑定#
复制代码意味着最终实现归项目自己维护。只拿一个按钮，就不必为了按钮引入一整套主题、Provider 和运行时。需要改结构时也不用绕过上游组件的抽象。
正确使用顺序#
- 按页面职责搜索，不先按「最炫」排序。
- 打开预览，检查手机、深色模式、键盘操作和减少动画设置。
- 看清依赖，只复制真正需要的文件。
- 把颜色、圆角、字体和间距换成项目现有 token。
- 删除装饰性依赖和没有业务价值的动画。
这套顺序的重点是「拿结构，不拿负担」。一个组件为了 Demo 效果依赖三四个动画或图形库，不代表你的页面也需要。能用 CSS 做的部分就留在 CSS，真实需要状态和交互的部分再保留 React。
社区组件的边界#
- 质量不统一：每个作者的类型、目录、命名和维护习惯都不同。
- 可访问性不能默认合格：焦点、键盘、语义标签、对比度和 reduced motion 要自己复检。
- 依赖可能超出视觉价值：一个背景效果不值得拖进大型运行时。
- 代码会过时：React、Next.js、Tailwind 和第三方库版本都可能与当前项目不同。
- 授权与素材要核对：复制前查看组件页面、来源和所用图片字体的许可。
放进 Astro 项目时怎么选#
这个站点主体是 Astro，不应该为了一个静态 Hero 把 React 整套搬进来。布局、卡片、按钮和纯 CSS 动效，优先把结构改写成 Astro 组件；只有聊天输入、复杂拖拽或持续状态这类真实交互，才值得做成 React island。
这也是 21st.dev 最适合的定位：参考实现和设计起点，而不是技术栈指令。看懂它为什么好，再用当前项目最小的原生能力复现。
逛组件站最容易犯的错，是把收藏数量当成设计进度。真正有用的流程是：找到一个方向，复制一份，删掉一半，再把剩下的改成自己的系统。