Designeer

合集 · 23 个精选 · 2026

shadcn/ui 区块、模板与组件

shadcn/ui 让复制粘贴组件成为默认做法，并由此长出一整套生态：社区注册表、区块合集、动画变体、图表，以及跨注册表搜索的工具。大多用同一个 CLI 安装，试用一个只需一条命令。

选自 React UI 组件库。

23 / 23

ui.shadcn.com
shadcn/ui preview
shadcn/ui组件库直接复制进自己代码库的 UI 组件，而不是作为依赖包安装。
21st.dev
21st.dev preview
21st.dev组件库社区版 shadcn 组件库，可先交互式预览再添加组件。
shadcnblocks.com
shadcnblocks preview
shadcnblocks组件库数千个 shadcn 风格、简洁即用的网站模块。
8bitcn.com
8bitcn preview
8bitcn组件库复古 8-bit 风格的 UI 组件，可直接用到 shadcn 项目中。
evilcharts.com
Evil Charts preview
Evil Charts组件库带动效的 SVG 图表组件，能完美融入 shadcn/ui 项目。
animate-ui.com
Animate UI preview
Animate UI组件库借助 Motion 动画库注入活力的无障碍 shadcn 组件。
basecn.dev
Base CN preview
Base CN组件库将 Base UI 基元重新封装，以融入 shadcn 组件工作流。
watermelon.sh
Watermelon UI preview
Watermelon UI组件库一个为融入 shadcn 工具生态而打造的 React 组件库。
hexter-ui.com
hexter-ui.com
Hexter UI组件库一套整洁简约的组件合集，可直接用到 shadcn 项目中。
kokonutui.com
Kokonut UI preview
Kokonut UI组件库富有创意的可交互 UI 组件，以 shadcn 格式封装使用。
seraui.com
Sera UI preview
Sera UI组件库可通过 shadcn 命令行工具直接安装的 React 组件。
shadcn-cssinjs.com
shadcn-cssinjs preview
shadcn-cssinjs组件库经过改造的 shadcn 组件，适配采用 CSS-in-JS 样式方案的项目。
23rd.dev
23rd preview
23rd组件库shadcn 风格的组件，React 和 Svelte 项目均可使用。
shieldcn.dev
shieldcn preview
shieldcn组件库契合 shadcn 风格的 README 徽章，用来美化你的项目文档。
startercn.vercel.app
startercn preview
startercn组件库可直接 fork 的 shadcn/ui registry 启动模板，内置文档、落地页和 agent 支持。
shadcn-labs.com
Shadcn Labs preview
Shadcn Labs组件库面向 shadcn/ui 生态的开源 registry 与工具合集。
dotmatrix.zzzzshawn.cloud
Dot Matrix preview
Dot Matrix组件库为 shadcn 项目打造的五十多款点阵风格加载动画。
shoogle.dev
Shoogle preview
Shoogle组件库索引众多 shadcn registry 中 UI 组件的搜索引擎。
odysseyui.com
Odyssey UI preview
Odyssey UI组件库构建于 shadcn 组件体系之上的一套动画 React 组件。
uiuno.com
Uiuno preview
Uiuno组件库借助 AI 整理和管理 shadcn 组件的工作空间。
sensory-ui.com
sensory-ui preview
sensory-ui组件库为 shadcn/ui 组件添加音频反馈的声音设计系统。
shadcnstudio.com
Shadcn Studio preview
Shadcn Studio组件库包含 shadcn/ui 组件、预制区块和完整模板的库。
shadcn-animated.vercel.app
Animated shadcn/ui preview
Animated shadcn/ui组件库由 Motion 驱动的标准 shadcn/ui 组件动画版本，用于打造动画界面。
shadcn/ui 区块、模板与组件（23） — Designeer