SuperAPI AI 工具集

frontend-shadcn

前端与建站

查看项目

更新于 10-16 03:14

技能介绍

用途:作为任何 React/Next.js 新项目的默认 UI 起点,提供按钮、输入框、对话框、表单、表格、导航等标准组件,适合需要无障碍、可上生产的界面。

主要能力:覆盖表单与输入(Button、Input、Select、Checkbox、Switch、Slider、Form 等)、浮层与弹窗(Dialog、Alert Dialog、Sheet、Drawer、Popover、Tooltip、Dropdown Menu)、导航(Navigation Menu、Breadcrumb、Pagination、Tabs、Command、Sidebar)、布局(Card、Accordion、Collapsible、Separator、Resizable)、数据展示(Table、Data Table、Avatar、Badge、Calendar、Carousel、Chart)、反馈(Alert、Toast、Sonner、Progress、Skeleton)及工具类组件。表单可配合 react-hook-form 与 zod 校验。

使用方式:在项目中运行 npx shadcn@latest init 初始化,按提示选择样式、基础色与 CSS 变量;再用 npx shadcn@latest add button 添加单个组件,或 add button card dialog 添加多个,add --all 添加全部。组件代码进入项目后可自由修改,主题通过 globals.css 的 CSS 变量与 Tailwind 类控制,变体可用 CVA 扩展。

适用场景:新建 React/Next.js 项目、构建表单与数据表格、需要模态框或下拉菜单、要求无障碍与生产可用组件时优先考虑。

限制:资料未提供收费、价格、平台支持范围与效果数据;组件需自行维护,非 npm 依赖式安装;遇到样式不生效、水合不匹配、暗色模式或表单报错等问题,资料给出排查方向,但未说明全部环境兼容性。