基于 Taro 4 为小程序带来 shadcn/ui 体验。
Taro Shadcn UI 是一个生产就绪的 UI 组件库，构建于 Taro 4、React 和 Tailwind CSS 4 之上。它提供了 shadcn/ui 优雅的设计和开发体验，并专门针对小程序生态系统进行了优化。
- 🚀 专为 Taro 4 打造: 针对最新的 Taro 4 框架进行了优化，支持微信小程序、字节跳动小程序和 H5。
- 📱 100% 小程序兼容: 对 Radix UI 或其他重型 DOM 库零依赖。所有组件均使用 Taro 原生组件和 Hook 重新构建。
- 🎨 Shadcn UI 设计: 美观、易用且高度可定制的组件，灵感源自 shadcn/ui。
- ⚡ Tailwind CSS 4: 利用最新的 Tailwind CSS 4 特性进行样式开发，并配合
weapp-tailwindcss实现无缝的小程序集成。 - 🛠️ CLI 工具: 自动化的项目初始化、组件添加和依赖管理。
- 📦 Monorepo 架构: 组件、文档和 CLI 工具之间清晰的关注点分离。
本项目提供了 SKILL.md，方便 AI 助手快速了解如何使用本库。
也可使用 skills CLI 一键安装到你的 AI 助手：
npx skills add louisyoungx/taro-shadcn向项目添加特定组件。CLI 将自动检测并安装所需的依赖项：
pnpm dlx taro-shadcn@latest add button accordion组件源代码（registry）：
packages/docs/src/components/ui/*.tsx
| 组件名称 | 描述 | 在线预览 | 安装命令 |
|---|---|---|---|
| Accordion | 折叠面板 | 预览 | pnpm dlx taro-shadcn@latest add accordion |
| Alert | 警告提示 | 预览 | pnpm dlx taro-shadcn@latest add alert |
| AlertDialog | 警告对话框 | 预览 | pnpm dlx taro-shadcn@latest add alert-dialog |
| AspectRatio | 固定宽高比容器 | 预览 | pnpm dlx taro-shadcn@latest add aspect-ratio |
| Avatar | 头像 | 预览 | pnpm dlx taro-shadcn@latest add avatar |
| Badge | 徽标/标签 | 预览 | pnpm dlx taro-shadcn@latest add badge |
| Breadcrumb | 面包屑导航 | 预览 | pnpm dlx taro-shadcn@latest add breadcrumb |
| Button | 按钮 | 预览 | pnpm dlx taro-shadcn@latest add button |
| ButtonGroup | 按钮组 | 预览 | pnpm dlx taro-shadcn@latest add button-group |
| Calendar | 日历选择 | 预览 | pnpm dlx taro-shadcn@latest add calendar |
| Card | 卡片容器 | 预览 | pnpm dlx taro-shadcn@latest add card |
| Carousel | 轮播 | 预览 | pnpm dlx taro-shadcn@latest add carousel |
| Checkbox | 复选框 | 预览 | pnpm dlx taro-shadcn@latest add checkbox |
| Collapsible | 可折叠区域 | 预览 | pnpm dlx taro-shadcn@latest add collapsible |
| Command | 命令面板/快捷搜索 | 预览 | pnpm dlx taro-shadcn@latest add command |
| ContextMenu | 右键菜单 | 预览 | pnpm dlx taro-shadcn@latest add context-menu |
| Dialog | 对话框 | 预览 | pnpm dlx taro-shadcn@latest add dialog |
| Drawer | 抽屉 | 预览 | pnpm dlx taro-shadcn@latest add drawer |
| DropdownMenu | 下拉菜单 | 预览 | pnpm dlx taro-shadcn@latest add dropdown-menu |
| Field | 表单字段容器 | 预览 | pnpm dlx taro-shadcn@latest add field |
| HoverCard | 悬浮卡片 | 预览 | pnpm dlx taro-shadcn@latest add hover-card |
| Input | 输入框 | 预览 | pnpm dlx taro-shadcn@latest add input |
| InputGroup | 输入组 | 预览 | pnpm dlx taro-shadcn@latest add input-group |
| InputOTP | 验证码输入 | 预览 | pnpm dlx taro-shadcn@latest add input-otp |
| Label | 标签 | 预览 | pnpm dlx taro-shadcn@latest add label |
| Menubar | 菜单栏 | 预览 | pnpm dlx taro-shadcn@latest add menubar |
| NavigationMenu | 导航菜单 | 预览 | pnpm dlx taro-shadcn@latest add navigation-menu |
| Pagination | 分页 | 预览 | pnpm dlx taro-shadcn@latest add pagination |
| Popover | 气泡弹层 | 预览 | pnpm dlx taro-shadcn@latest add popover |
| Progress | 进度条 | 预览 | pnpm dlx taro-shadcn@latest add progress |
| RadioGroup | 单选组 | 预览 | pnpm dlx taro-shadcn@latest add radio-group |
| Resizable | 可调整大小面板 | 预览 | pnpm dlx taro-shadcn@latest add resizable |
| ScrollArea | 滚动区域 | 预览 | pnpm dlx taro-shadcn@latest add scroll-area |
| Select | 选择器 | 预览 | pnpm dlx taro-shadcn@latest add select |
| Separator | 分隔线 | 预览 | pnpm dlx taro-shadcn@latest add separator |
| Sheet | 侧边面板 | 预览 | pnpm dlx taro-shadcn@latest add sheet |
| Skeleton | 骨架屏 | 预览 | pnpm dlx taro-shadcn@latest add skeleton |
| Slider | 滑块 | 预览 | pnpm dlx taro-shadcn@latest add slider |
| Sonner | Toast 通知 | 预览 | pnpm dlx taro-shadcn@latest add sonner |
| Switch | 开关 | 预览 | pnpm dlx taro-shadcn@latest add switch |
| Table | 表格 | 预览 | pnpm dlx taro-shadcn@latest add table |
| Tabs | 标签页 | 预览 | pnpm dlx taro-shadcn@latest add tabs |
| Textarea | 多行输入 | 预览 | pnpm dlx taro-shadcn@latest add textarea |
| Toast | 吐司提示 | 预览 | pnpm dlx taro-shadcn@latest add toast |
| Toggle | 切换按钮 | 预览 | pnpm dlx taro-shadcn@latest add toggle |
| ToggleGroup | 切换按钮组 | 预览 | pnpm dlx taro-shadcn@latest add toggle-group |
| Tooltip | 文字提示 | 预览 | pnpm dlx taro-shadcn@latest add tooltip |