Origin UI

基于 Radix UI 和 Tailwind CSS 的精致组件集合，采用 copy-paste 模式，是 shadcn/ui 的扩展增强版。

技术简介说明

Origin UI 是一个面向 React 和 Next.js 的 UI 组件集合，提供超过 600 个精心设计的组件变体。它采用与 shadcn/ui 相同的 copy-paste 模式，组件源码直接复制到项目中，让你拥有完全的控制权。

Origin UI 的核心定位是 shadcn/ui 的"精致扩展"——在 Radix UI 无头原语和 Tailwind CSS 样式系统的基础上，提供更丰富、更优雅的视觉设计。相比 shadcn/ui 的 ~50 个核心组件，Origin UI 提供 600+ 组件变体，覆盖表单输入、导航、反馈、数据展示、布局等完整场景。

⚠️ 重要更新（2025 年 10 月）：Origin UI 于 2025 年 10 月被 Cal.com 收购，现已演变为 coss.com/ui。原始仓库 shadcn/originui 已进入维护模式，但代码仍可使用。新项目建议关注继任项目 coss ui。

基本信息

• 官网：https://coss.com/origin（原 originui.com 已重定向）
• GitHub：https://github.com/shadcn/originui（原始仓库，维护模式）
• 继任项目：https://github.com/cosscom/coss（coss ui，活跃开发）
• License：MIT License
• 最新版本：原始版本已归档；继任项目 coss ui 基于 Base UI 持续更新（2026 年活跃）
• 主要维护者：原始为 Origin Space；现由 COSS / Cal.com（cosscom）维护

快速上手

安装

Origin UI 采用纯手动复制模式（无 CLI 工具）：

# 前置要求：项目已配置 shadcn/ui（Tailwind CSS + Radix UI）
npx shadcn@latest init
 
# 然后手动复制组件：
# 1. 浏览 coss.com/origin 找到需要的组件
# 2. 复制组件源码到 components/ui/ 目录
# 3. 手动安装缺失的依赖项

基础配置

确保项目已配置好 shadcn/ui 基础设施：

// components.json
{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

最小示例

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
 
export default function LoginForm() {
  return (
    <div className="space-y-4">
      <Input type="email" placeholder="邮箱" />
      <Input type="password" placeholder="密码" />
      <Button className="w-full">登录</Button>
    </div>
  )
}

核心概念与架构

与 shadcn/ui 的关系

Origin UI 建立在 shadcn/ui 的基础之上：

shadcn/ui（基础组件 ~50 个）
    ↓ 扩展
Origin UI（600+ 组件变体）
    ↓ 演进
coss ui（继任项目，基于 Base UI）

技术栈

Copy-Paste 模式

浏览网站 → 选择组件 → 复制源码 → 粘贴到 components/ui/

• 组件成为你代码库的一部分
• 完全可定制，无版本锁定
• 无 CLI 工具，纯手动复制

组件分类

核心特性

• 600+ 组件变体：远超 shadcn/ui 的 ~50 个核心组件
• 精致设计：比 shadcn 基础组件更具视觉吸引力
• Copy-Paste 模式：完全源码控制，无运行时依赖
• MIT 许可：完全免费，可商用
• 暗色模式支持：所有组件均支持 light/dark 主题
• 响应式设计：所有组件支持移动端适配
• 无状态锁定：代码在你的项目中，完全控制权
• shadcn 兼容：基于相同的 Radix UI + Tailwind CSS 技术栈

生态图

项目演进

Origin UI（原始项目）
    ↓ 2025.10 被 Cal.com 收购
coss ui（继任项目）
    ├── 基于 Base UI（非 Radix）
    ├── 持续活跃开发
    └── 9.8K-10.2K stars

社区 Fork

相关工具

适用场景

• 营销网站 / Landing Page：精致设计适合展示型项目
• Dashboard / 管理后台：丰富的表单和表格组件
• SaaS 应用 UI：快速构建专业级界面
• 需要快速原型的项目：复制粘贴即可使用
• shadcn/ui 用户需要更多组件：作为设计参考和扩展
• 新项目启动：直接使用继任项目 coss ui

开发与工程化

开发流程

1. 确保项目已配置 shadcn/ui 基础设施
2. 浏览 coss.com/origin 选择组件
3. 复制组件源码到 components/ui/ 目录
4. 手动安装缺失的依赖项
5. 根据需要调整样式和配置

构建部署

与标准 shadcn/ui 项目一致：

npm run build  # Next.js 构建

版本管理

• 组件源码在项目中，无版本锁定
• 手动同步上游更新
• 使用 Git 追踪组件变更

性能与安全

性能特点

优化建议

• 按需导入组件
• 使用 React.lazy() 做路由级代码分割
• 大数据表格使用虚拟滚动

安全注意事项

• 组件源码可审计
• 无第三方运行时依赖风险
• 继承 Radix UI 的焦点管理和 ARIA 支持

技术对比

关键差异

• vs shadcn/ui：Origin UI 提供更多组件变体和更精致的视觉；shadcn/ui 社区更大、CLI 更完善
• vs Aceternity UI：Origin UI 专注实用组件；Aceternity 专注动画特效
• vs Magic UI：Origin UI 组件更丰富；Magic UI 动画更专业

最佳实践

推荐做法

1. 复制后自定义：将 Origin UI 组件作为起点，按需调整为你的设计语言
2. 先理解 shadcn 基础：确保了解 shadcn/ui 和 Radix 的基础架构
3. 关注 coss ui：新项目直接使用继任项目 coss ui
4. 使用 Tailwind CSS 变量：通过 CSS 变量做主题定制
5. 升级时全面测试：Tailwind/shadcn 升级时全面测试兼容性

代码组织

components/
├── ui/           # shadcn/ui + Origin UI 组件
├── forms/        # 表单相关复合组件
├── layout/       # 布局组件
└── features/     # 业务功能组件

常见陷阱

• 与 shadcn/ui 文件冲突：同名同路径组件（如 components/ui/label.tsx）会互相覆盖
• 直接混用同名组件：Origin UI 和 shadcn/ui 的同名组件可能不兼容
• 期望原始仓库持续更新：原始仓库已进入维护模式
• 忽视版本兼容性：Origin UI 依赖特定版本的 shadcn/Radix

技术局限与边界

不太适合的场景

• 期望长期稳定维护的原始仓库（考虑 coss ui 或 shadcn/ui）
• 不使用 Radix UI / Tailwind CSS 的项目
• 需要动画特效的项目（考虑 Aceternity UI 或 Magic UI）
• 追求最大社区支持的项目（考虑 shadcn/ui）

学习资源

官方资源

• 继任项目 coss ui：coss.com/ui/docs
• GitHub 原始仓库：github.com/shadcn/originui
• 继任项目 GitHub：github.com/cosscom/coss
• 官方网站（重定向）：coss.com/origin

社区 Fork

• Origin UI Vue
• Origin UI Angular
• Origin UI Svelte

相关资源

• Figma 设计文件
• MCP Server（AI 集成）
• 21st.dev 组件浏览
• Awesome shadcn/ui

2026 年现状

最新版本

发展趋势

• 被 Cal.com 收购：项目演变为 coss ui
• 技术栈迁移：从 Radix UI 迁移到 Base UI
• 持续活跃开发：coss ui 作为继任项目持续发展
• 社区 Fork 独立维护：Vue、Angular、Svelte 版本继续独立更新

社区活跃度

• 原始仓库 ~6.6K stars（维护模式）
• 继任项目 coss ui ~9.8K-10.2K stars
• 社区 Fork 继续维护

未来路线图

• coss ui 持续扩展组件库
• 基于 Base UI 的新架构持续演进
• 社区 Fork 继续支持多框架