Origin UI

基于 Base UI 和 Tailwind CSS 构建的现代 React 组件库，提供 500+ 即拿即用的组件，遵循 shadcn/ui 的复制粘贴理念，让开发者拥有完整代码所有权。

核心设计理念

与 shadcn/ui 一样采用「复制粘贴」模式，开发者直接获取组件源码而非安装闭包依赖，可随意编辑文件实现定制。底层选择 Base UI 而非 Radix UI，因为其无样式原语在可访问性和键盘导航方面更稳健。

• 无抽象层：组件源码直接交付，没有额外封装
• 渐进式采用：Cal.com 官方设计系统，逐步在 Cal.com 产品中落地
• 早期开发阶段：Base UI 仍处 beta，可能发生破坏性变更

组件覆盖范围

官网列出 50+ 组件，涵盖常见 UI 模式（按钮、表单、弹窗、导航）以及较新颖的粒子效果（Particles）、命令面板（Command）、预览卡片（Preview Card）等。

• 表单类：Autocomplete、Combobox、OTP Field、Number Field（带步进和拖拽区域）
• 弹窗类：Dialog、Drawer（支持滑动手势和吸附点）、Sheet、Alert Dialog
• 数据展示：Calendar（支持范围和多选）、Table、Pagination（含页面导航和上下页链接）
• 布局与反馈：Frame、Skeleton、Toast、Progress、Spinner
• 特殊组件：Command 调色板（基于 Dialog + Autocomplete）、Preview Card（悬停链接时预览）

安装与使用方式

提供 CLI 和手动两种安装途径。CLI 命令为 `pnpm dlx shadcn@latest add @coss/组件名`，与 shadcn/ui 生态兼容。手动安装则直接复制源码文件到项目 `@/components/ui/` 目录。

• 包管理器支持：bun、npm、pnpm、yarn
• Tailwind 版本：支持 Tailwind CSS v4，同时提供 v3 兼容版本
• Hooks 工具：内置 useMediaQuery 和 useCopyToClipboard 两个自定义 Hook

文档与资源

每个组件页面包含 API 引用、安装说明、用法示例和代码预览。提供 llms.txt 文件供大语言模型检索，另有迁移指南（从 Radix UI 迁移）和路线图。

• 组件示例：Accordion 页面展示三项 FAQ 示例，Alert 页面提供 variant 属性（default/error/info/success/warning）
• API 引用：Alert 组件为自定义组件而非 Base UI 包装器，AlertDialog 提供 render prop 自定义触发器按钮

常见问题

Q1：Origin UI 和 shadcn/ui 有什么区别？

A1：两者都采用复制粘贴源码的模式，但 Origin UI 底层基于 Base UI 而非 Radix UI，并且是 Cal.com 的官方设计系统。组件数量超过 500 个，包含一些 shadcn/ui 没有的组件（如 Particles、Command 调色板）。

Q2：Origin UI 适合生产环境使用吗？

A2：目前处于早期开发阶段，Base UI 本身也在 beta，官方建议在能接受变更的项目中使用。但组件已通过 Cal.com 生产环境验证，且采用 MIT 许可，可自由修改源码适配生产需求。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。