SuperAPI AI 工具集

shadcn-ui

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:shadcn/ui 提供可访问、可定制的 React 组件,组件代码通过 CLI 复制到项目中,不使用 npm 包,开发者拥有并可直接编辑代码。适用于 Next.js(App Router)、Vite 及其他 React 框架。

主要能力:组件基于 Radix UI 与 Tailwind CSS,采用开放代码、可组合 API 与默认样式,通过 CLI 和 schema 分发。官方组件覆盖布局结构(Accordion、Card、Sidebar、Resizable 等)、表单输入(Button、Form、Input、Select、Checkbox 等)、导航菜单(Breadcrumb、Command、Dropdown Menu、Tabs 等)、浮层反馈(Alert、Dialog、Drawer、Popover、Tooltip 等)以及数据状态(Avatar、Badge、Calendar、Chart、Table、Sonner 等)。

使用方式:前置要求为 Tailwind v4(主 CSS 中 @import "tailwindcss",使用 @tailwindcss/vite 或 @tailwindcss/postcss,不使用 tailwind.config.js)以及路径别名 @/*。常用命令:shadcn create 新建项目、shadcn init 初始化已有项目、shadcn add <name> 添加组件(可一次多个)。初始化会生成 components.json,控制 style、路径与 Tailwind 集成;组件安装到 src/components/ui/ 或 components.json 指定路径。导入时从别名路径引入,如 import { Button } from "@/components/ui/button"。主题通过 CSS 变量与 @theme 配置,baseColor 可选 neutral、slate、gray、zinc、stone。

适用场景:需要可完全掌控组件源码的 React 项目,尤其是使用 Next.js App Router 或 Vite 并采用 Tailwind v4 的前端开发。

限制:要求 Tailwind v4 与路径别名;不创建 tailwind.config.js,主题仅用 CSS;需确保全局 CSS 被应用入口导入;Next.js App Router 中按需设置 rsc。具体收费、价格与平台信息暂未提供。