xxxxxxxxxx11npx shadcn@latest init三个问题的答案:
xxxxxxxxxx31Which style would you like to use? › Default2Which color would you like to use as base color? › Slate3Do you want to use CSS variables for colors? › Yes安装具体组件:
xxxxxxxxxx21# 3. 添加最常用的几个组件(以后随时可以再加)2npx shadcn@latest add button card badge avatar dropdown-menushadcn的定位是:提供基础组件(primitives),不提供业务组件或复杂组件。
所以下面的组件是没有的,不用一直找了,要么自己实现,要么找第三方库。
📊 shadcn/ui 未提供的常见业务组件汇总表
| 类别 | 组件名称 | shadcn 是否提供 | 为什么没有 | 常见替代方案 |
|---|---|---|---|---|
| 导航类 | Pagination(分页) | ❌ 无 | 业务差异巨大 | 手写 Button 组合 / magicui |
| Breadcrumb(面包屑) | ❌ 无 | 路径结构差异大 | 自定义 + Link | |
| Navbar(顶部导航) | ❌ 无 | 组成复杂,布局随需求变化 | 自定义组合 | |
| Sidebar(侧边栏) | ❌ 无 | 结构差异大 | Layout 模板手写 | |
| 表单与输入类 | Rich Text Editor(富文本) | ❌ 无 | 过于复杂,专用库更好 | TipTap / Lexical / Quill |
| Markdown Editor | ❌ 无 | 渲染与编辑逻辑复杂 | react-markdown + textarea | |
| File Uploader | ❌ 无 | 上传/预览/进度逻辑复杂 | uploadthing / dropzone | |
| Image Cropper(裁切) | ❌ 无 | 图像处理复杂 | react-easy-crop | |
| 数据展示类 | DataTable(高级表格) | ⚠️ 半成品(示例) | 核心逻辑需 tanstack 实现 | tanstack + shadcn |
| TreeView(树形组件) | ❌ 无 | 业务差异大 | rc-tree / 自己写 | |
| Carousel(轮播) | ❌ 无 | 交互复杂 | embla-carousel | |
| Kanban Board(看板) | ❌ 无 | 需要拖拽与布局 | react-beautiful-dnd | |
| Timeline(时间线) | ❌ 无 | UI 差异大 | 自定义 | |
| Stepper(步骤条) | ❌ 无 | 业务流程相关 | 自定义 | |
| 交互类 | Modal Manager(全局模态控制) | ❌ 无 | 需要全局状态管理 | 自定义 provider |
| Infinite Scroll(无限滚动) | ❌ 无 | 数据源/行为差异大 | IntersectionObserver | |
| 日期类 | Date Range Picker(范围选择) | ❌ 无 | 难以通用化 | 自定义组合 / react-day-picker |
| TimePicker | ❌ 无 | 需求差异大 | 自定义 | |
| 图表类 | Charts(图表) | ❌ 无 | 业务复杂 | Recharts / Chart.js / Tremor |
| 媒体类 | Video Player | ❌ 无 | 功能差异大 | react-player |
| Audio Player | ❌ 无 | 功能差异大 | 自定义 / react-h5-audio-player |