构建 UI 组件

上一节课我们聊了如何快速配置 NextDevKit 内置的 UI 组件，虽然说 NextDevKit 内置了很多 UI 组件，但是肯定无法满足所有人的需求，你也可以根据你的需求，快速构建你的其它 UI 组件。今天来聊一聊我一般是如何快速构建我需要的 UI 组件的。

Shadcn UI 组件

NextDevKit 基于 Shadcn UI 来构建基础组件库，例如 button, alert, card, input, select, table 等等。在 src/components/ui 目录下，你可以找到所有 Shadcn UI 的组件。

但是 NextDevKit 并没有安装所有的 Shadcn UI 组件，一方面是基于打包体积考虑，另一方面还是保持按需引入的良好工程实践。

🚀 如何在 NextDevKit 中添加 Shadcn UI 组件

由于 NextDevKit 已经配置好了 Shadcn UI 的基础配置，所以你只需要根据你的需求，添加你需要的组件即可。

# 添加单个组件
npx shadcn@latest add button

# 一次性添加多个常用组件
npx shadcn@latest add card dialog sheet table dropdown-menu

在项目中使用组件

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

🧱 内置组件

除了 Shadcn UI 的基础组件之外，NextDevKit 还为你准备了丰富的内置组件，涵盖了 SaaS 应用的各个方面：

🔐 认证组件 (`/auth/`)

完整的用户认证流程组件：

login-form - 登录表单
signup-form - 注册表单
forgot-password-form - 忘记密码表单
reset-password-form - 重置密码表单
social-signin - 社交登录按钮组合

📊 仪表板组件 (`/dashboard/`)

管理后台必需的布局组件：

dashboard-header - 仪表板顶部导航
dashboard-sidebar-menu - 侧边栏菜单
dashboard-sidebar-user - 用户信息展示
sidebar - 可折叠侧边栏

🎯 营销组件 (`/marketing/`)

构建营销页面的专业组件：

首页组件：hero-section（英雄区块）, feature-section（功能展示）
商业组件：pricing（定价表）, testimonials（用户评价）
互动组件：contact-form（联系表单）, faq（常见问题）
内容组件：changelog（更新日志）, affiliate（联盟推广）

⚙️ 设置组件 (`/settings/`)

用户设置页面的完整组件套装：

账户管理：头像修改、姓名邮箱修改、语言切换、账户删除
安全设置：密码修改、社交账号绑定
订阅管理：支付方式管理、邮件订阅设置

🌐 共享组件 (`/shared/`)

跨页面使用的通用组件：

布局组件：header（头部导航）, footer（页脚）
功能组件：theme-switcher（主题切换）, locale-switcher（语言切换）
表单组件：newsletter-subscriber（邮件订阅）, cookie-consent（Cookie 同意）
业务组件：user-avatar（用户头像）, providers（全局提供者）

🎨 图标组件 (`/icons/`)

精心设计的图标集合：

社交媒体图标：github, google, discord, x, linkedin 等平台
品牌图标：logo（站点 Logo）, not-found（404 图标）

💡 示例组件 (`/examples/`)

展示高级功能的示例组件：

AI 功能：聊天界面、图像生成、语音输入
仪表板示例：数据统计、用户卡片、设置表单等 11 个实用示例

📝 专项组件

管理员组件 (/admin/)：用户管理表格
博客组件 (/blog/)：MDX 支持、目录生成、返回顶部
文档组件 (/docs/)：技术文档

这些内置组件都已经过精心设计和测试，符合响应式和国际化，并且在移动端响应式也非常友好，可以直接在你的项目中使用，大大加速开发效率！

🌐 相关网站详细信息

官方资源：

ui.shadcn.com - Shadcn UI 官方网站提供最权威的组件文档、安装指南和完整示例代码，包含所有组件的API文档

🌟 社区里优秀的组件库

除了 Shadcn UI 本身的基础组件库之外，社区还有很多优秀的可以兼容 Shadcn UI 的组件库和资源，可以帮助你快速构建现代化的 UI，以下都是我常用的一些参考组件库，NextDevKit 也是基于这些开源免费的组件库来构建的：

🎨 免费组件库

动画和交互组件：

Aceternity UI - 现代化的 React 组件库，提供精美的动画效果和交互组件，基于 Tailwind CSS 构建
Magic UI - 专注于动画效果的组件库，提供各种炫酷的动画组件和特效
Animata - 专业的动画组件集合，提供丰富的动画效果和交互体验
Animate UI - 轻量级的动画组件库，易于集成和定制

综合组件库：

21st.dev - 现代化的 React 组件集合，提供高质量的 UI 组件和设计模式
Origin UI - 简洁优雅的 UI 组件库，提供完整的设计系统
Cult UI - 独特设计风格的组件库，适合创意型项目
Kokonut UI - 轻量级组件库，专注于易用性和性能
Spectrum UI - 全面的组件库，提供企业级应用所需的各种组件
Eldora UI - 现代化设计的组件库，注重用户体验
React Bits - React 组件片段和代码示例库，便于快速复用

🔧 专业工具库

富文本编辑器：

Novel - 基于 Tiptap 的现代化 Notion 风格编辑器，支持富文本编辑和实时协作

用户引导工具：

Driver.js - 轻量级的用户引导库，帮助创建产品导览和用户旅程

图标库：

Icon Sets - 丰富的图标集合，提供各种风格的矢量图标，并且是拥有动画效果的图片库。

📚 资源和集合

如果你还需要找到更多的免费社区 Shadcn UI 的组件，可以参考以下资源：

Awesome Shadcn UI - 精心整理的 Shadcn UI 相关资源集合，包括组件、工具、教程等

💰 付费高级组件

如果需要更专业的组件和支持，可以考虑以下付费选项：

Shadcn Blocks - 高质量的 Shadcn UI 预制区块和模板
Shadcn UI Kit - 完整的 Shadcn UI 组件包和设计系统

On this page