shadcn/ui 组件库
shadcn/ui
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
功能概览
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
- 用现成组件库改不了品牌色和字体
- 组件库依赖重、升级难
- 无障碍支持不到位
- 需要深度定制的官网/营销站
使用场景
- 做品牌官网和营销站
- 做需要深度定制视觉的产品
- 做内部系统后台
- 需要无障碍支持的正式项目
适合谁用
- 前端开发者
- 做品牌官网的人
- 用 Next.js / React 的团队
- 需要深度定制 UI 的人
不适合谁
- 不用 React 的人
- 只需要现成主题不想改的人
普通人版解释
用大白话说这是做现代网站最常用的 UI 组件库。它给你按钮、卡片、对话框、表单等组件，代码直接复制到你项目里，你可以随便改颜色字体。很多科技公司官网都用它做底座。
专业版解释
给 Claude Code / Codex 用户shadcn/ui 是当前前端社区最火的 UI 方案。基于 Radix UI 无障碍组件 + Tailwind CSS 实现，采用「复制粘贴到项目」的模式——你完全拥有组件代码，可深度定制品牌色彩、字体、间距，没有依赖包袱。设计风格简约高级，是绝大多数初创品牌、科技公司官网的首选底座。
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
npx shadcn@latest init
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
- 1.请用 shadcn/ui 帮我搭一个品牌官网
- 2.请用 shadcn/ui 做一个可深度定制主题的后台
- 3.请用 shadcn/ui 的 Dialog 和 Form 组件做一个表单
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 否 | 不建议新手 |
相关技能包
Web 组件构建技能包
让 AI 用 React、Tailwind、shadcn/ui 构建复杂的多组件 claude.ai HTML artifacts。
HeroUI 组件库
React 生态颜值天花板之一，设计审美在线，主题系统灵活，支持明暗模式和自定义设计令牌，Next.js SSR 完美兼容。
Nuxt UI 组件库
Vue/Nuxt 生态官方旗舰 UI 库，基于 Tailwind，原生支持 SSR/SSG，对 SEO 和首屏加载友好，自带无障碍和暗黑模式。
React 动画技能包
让 AI 在 React / Next.js 里正确使用 GSAP：useGSAP hook、清理、SSR 不报错。
前端设计技能包
让 AI 做有辨识度的前端视觉设计：美学方向、字体、避免模板化的廉价感。
Magic UI 动效组件库
在 shadcn/ui 基础上扩展的动效组件库，50+ 动画展示组件：数字滚动、3D 进度条、光斑背景、刮刮卡交互，现代灵动。