1. 🎨 Shadcn UI 工具集合

Shadcn UI 是一个优秀的 React 组件库，提供了高度可定制的界面组件，支持深色模式、可访问性和键盘导航。本文收集了一系列帮助你使用和定制 Shadcn UI 的实用工具。

1.1. 📚 什么是 Shadcn UI？

Shadcn UI 不是传统意义上的组件库，而是一种通过复制组件代码到你的项目中的方式，让你拥有完全的控制权。

它基于 Radix UI 和 Tailwind CSS，可与 Next.js、Astro、Remix 等框架无缝集成。

1.2. 🛠️ 官方资源

• Shadcn UI 官网 - 官方文档和主题展示
  • 提供完整的组件文档和使用指南
  • 可以在线预览和定制主题
  • 内置多种预设主题和颜色方案

1.3. 🎭 主题工具

1.3.1. 浏览和发现

• UI.JLN.DEV - 超过 10,000+ 个 Shadcn UI 主题
  • 浏览社区创建的海量主题
  • 按颜色、风格或用途筛选
  • 支持一键复制配置到你的项目

1.3.2. 主题生成器

• Gradient.page 主题生成器

  • 通过直观的界面创建自定义主题
  • 实时预览效果
  • 自动生成主题配置代码

• ZippyStarter 主题生成器

  • 简单易用的拖拽界面
  • 支持颜色参数微调
  • 内置多种设计系统预设

• Tinte 主题定制工具

  • 高级调色板创建工具
  • 支持色彩理论和调和
  • 一键导出多种格式

1.4. 💡 使用技巧

1.4.1. 快速安装

# 初始化配置（CLI 已从 shadcn-ui 更名为 shadcn，无需单独安装依赖）
pnpm dlx shadcn@latest init

1.4.2. 添加组件

# 添加按钮组件
pnpm dlx shadcn@latest add button

# 添加多个组件
pnpm dlx shadcn@latest add button card toast

1.5. 🔗 相关资源

• Radix UI - Shadcn UI 的底层组件库
• Tailwind CSS - 用于样式定制的工具集
• next-themes - 为 Next.js 提供主题支持

1.6. 🌟 推荐项目模板

• Next.js + Shadcn UI 启动模板
• T3 Stack - 包含 Shadcn UI 的全栈开发模板