2023年最火前端开源项目，已获46K star!-前端-CSS教程

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

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

shad***-ui是一套基于React的UI组件库，它与众不同之处在于，它允许开发者通过TailwindCSS来自定义样式。shad***-ui建立在Radix这一无头组件的基础上，提供了一系列底层组件，以解决可访问性和键盘交互等问题。与其他流行的库（如MUI、ChakraUI、React Spectrum）不同，shad***-ui不是通过NPM包的形式提供，而是通过命令行工具直接将组件源代码复制到你的代码库中，以便进行个性化的修改。

shad***-ui的核心特性包括：

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

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

shad***-ui自今年1月份推出以来，不到一年的时间内，它的星标数量就激增至40,000以上，这是许多项目难以达到的成就。

选择shad***-ui的理由很明显：

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

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

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

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

使用 shad***-ui

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

这也是比较方便快捷方式，你也可以手动来配置，需要一步步将shad***-ui所需的各种组件安装进项目，比较麻烦，我们还是看下在nextjs中使用的例子。

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

npx create-next-app@latest my-app --typescript --tailwind --eslint

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

npx shad***-ui@latest init

配置***ponents.json，在执行初始化的时候，会有一些问题来配置项目

完成后的项目结构如下：

接下来就是添加shad***-ui的组件了，直接使用cli来添加组件：

npx shad***-ui@latest add button

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

接下来就可以直接使用这个组件了：

import { Button } from "@/***ponents/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}