shadcn/ui

项目概述

shadcn/ui 是一套颠覆传统开发体验的现代化开源 UI 组件集合。与传统的 npm 安装包组件库不同，它采用“直接复制代码到项目”的全新架构理念，结合 Radix UI（无头底层） 与 Tailwind CSS（原子化样式），赋予开发者对组件代码 100% 的所有权与极致的自定义自由。

目前已成为全栈 React、Next.js 与独立开发者构建高审美现代化产品的行业事实标准。

核心特性

• 🛠️ 代码直接持有：组件源码直接存放在项目的 @/components/ui 目录下，无需与第三方库脆弱的内部 CSS API 抗争。
• ♿️ 无障碍第一（A11y）：底层完全基于 Radix UI Primitives，原生内建完善的键盘快捷导航、焦点管理与 WAI-ARIA 规范。
• 🎨 开箱即用的暗黑模式：基于 CSS 变量的精密设计 Token 体系，深浅色主题切换顺滑自然。
• ⚡️ 强大的 CLI 工具：通过 npx shadcn@latest add <component> 一键按需拉取所需组件与依赖。

快速上手与示例代码

# 初始化配置
npx shadcn@latest init

# 按需添加组件
npx shadcn@latest add button dialog dropdown-menu

基础调用示例

import React from 'react';
import { Button } from "@/components/ui/button";

export default function Demo() {
  return (
    <div className="flex gap-3">
      <Button variant="default">主要操作</Button>
      <Button variant="outline">次要操作</Button>
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：现代 Next.js / Vite / Remix 全栈项目、追求高审美、极致定制自由与轻量化架构的敏捷团队及独立开发者。
• 不适用场景：完全不使用 Tailwind CSS 的遗留大型系统，或习惯单包黑盒式整体升级的企业传统中台。