SuperAPI AI 工具集

shadcn-ui

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:该技能用于指导使用 shadcn/ui、Radix UI 与 Tailwind CSS 构建可访问且可定制的 UI 组件,适合新建项目初始化、单独组件安装配置、表单校验、可访问组件创建、Tailwind 样式定制、设计系统落地及 Next.js/TypeScript 应用开发等场景。

主要能力:覆盖 Button、Input 与表单字段、带校验的 Forms、Card、Dialog、Select、Sheet、Menubar 与导航、Table、Toast 等核心组件,并涉及自定义、Next.js 集成与最佳实践。资料说明 shadcn/ui 并非传统组件库或 npm 包,而是可复制进项目的可复用组件集合,代码归使用者所有,基于 Radix UI 原语实现可访问性,样式使用 Tailwind CSS,并提供 CLI 工具安装组件。

使用方式:新项目可用 npx create-next-app@latest my-app --typescript --tailwind --eslint --app 创建,进入目录后执行 npx shadcn@latest init 初始化,再用 npx shadcn@latest add button input form card dialog select 安装组件。已有项目可先运行 npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react,然后执行 npx shadcn@latest init。也可通过 npm install @radix-ui/react-slot 等依赖手动安装并在 src/components/ui/ 放置组件代码。

限制:资料未提供具体收费、价格、平台支持范围与效果保证等信息,暂未提供。