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- 快速安装

# 使用 pnpm 安装 Shadcn UI CLI
pnpm add -D @shadcn/ui

# 初始化配置
pnpm dlx shadcn-ui@latest init

1.4.2- 添加组件

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

# 添加多个组件
pnpm dlx shadcn-ui@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 的全栈开发模板

💼 提示：将 Shadcn UI 与其他设计系统结合，可以创建独特而专业的用户界面。定期查看官方文档获取最新组件和功能更新。

最后更新: 2024 年 6 月