海鲸AI-ChatGPT4.0国内站点，支持设计稿转代码：https://www.atalk-ai.com

前端开发领域总是涌现着各种新星，而开源项目更是这一领域的亮点。如今，我们要介绍的是2023年在上迅速走红的前端开源项目——shadcn-ui，它已经收获了超过45,800个星标。

shadcn-ui的核心特性包括：

• 主题和主题编辑器：通过图形界面创建和定制主题，编辑器生成的代码片段可以直接复制粘贴到项目中。

• 深色模式支持：适用于Next.js和Vite应用的暗黑模式。
• CLI工具：自动配置项目，集成框架，生成配置文件，添加组件等。
• 组件库：提供超过40种基础组件。

选择shadcn-ui的理由很明显：

• 开箱即用：只需基本的HTML、CSS、Javascript和框架知识，就可以快速上手Shadcn UI。它的组件可以通过复制粘贴或CLI工具轻松获取，同时提供了详细的文档。
• 可访问性：Shadcn UI的组件完全符合Web内容可访问性指南（WCAG）标准，支持屏幕阅读器、键盘导航等辅助功能。
• 细粒度控制和可扩展性：Shadcn UI允许直接访问每个组件的源代码，使得定制和调整以适应特定需求变得简单。

然而，任何技术选型都有其权衡之处：

• 额外工作量：与其他组件库相比，shadcn-ui需要更多手动操作，可能会增加团队的工作量。
• 代码膨胀：直接编辑组件代码虽然提高了模块化和可扩展性，但也可能导致代码库增大。
• 维护性：由于使用了tailwind，可能会面临类似的维护挑战，尤其是在大型项目中。

要在项目中使用shadcn-ui，可以选择与多种框架集成，或者手动配置。以Next.js为例，首先使用create-next-app创建一个新项目，然后通过shadcn-ui的CLI工具初始化。接下来，可以通过CLI工具添加所需的组件，如按钮，然后在项目中直接引用即可。

shadcn-ui支持和各种框架集成使用，如下：

1、首先创建一个nextjs的项目，我们就使用create-next-app来创建：

2、使用shadcn-ui的cli来初始化项目

添加后在component中可以直接看到button的代码：

Shadcn UI 组件的通用架构如下：

结构和行为层样式层