Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Get Started
2026 年 1 月 - Base UI 文档
Base UI 组件的完整文档。
我们已经发布了 Base UI 组件的完整文档。
当我们在 12 月发布 npx shadcn create 时,就已经引入了在 Radix 和 Base UI 之间选择组件库的能力。今天,我们进一步推出了所有 Base UI 组件的完整文档。
新内容
- 完整的 Base UI 文档 - 每个组件现在都有专门的 Base UI 文档,涵盖用法、属性和示例。
- 重建示例 - 所有组件示例都已为 Radix 和 Base UI 重新构建。你可以在两者之间切换,查看实现差异。
- 并排对比 - 文档让你很容易比较组件在两套库中的工作方式。
相同抽象,不同原语
目标依然一样:无论你选择哪种原语库,都能获得一致的 API。组件的外观和行为保持一致,变化的只是底层实现。
// 无论你使用 Radix 还是 Base UI,效果都一样。
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"如果你要开始一个新项目,运行 npx shadcn create 并选择你偏好的库。其余部分由 CLI 处理。
试试 shadcn/create