shadcn/ui：2024年最受欢迎的前端项目

什么是Shadcn

官网：https://ui.shadcn.com/

Github：https://github.com/shadcn-ui/ui

在 shadcn 文档 https://ui.shadcn.com/docs，可以看到相关介绍：

• shadcn/ui 不是组件库，而是可重复使用的组件的集合

• 开发者可以将其复制粘贴到您的应用中，而不是作为依赖项进行安装

shadcn/ui 目前包括了常用的组件，并且在持续更新中。

接下来：我们初始化一个 Next.js 项目，然后使用 shadcn/ui 来理解上面的定义：

初始化Next.js项目

npx create-next-app@latest
Need to install the following packages:
create-next-app@15.1.5
Ok to proceed? (y) 
✔ What is your project named? … shadcn-ui-example
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /shadcn-ui-example.

安装shadcn/ui

npx shadcn@latest init -d

将组件添加到项目

npx shadcn@latest add button

在 package.json 中我们并没有找到关于 button 的依赖：

而是在 shadcn-ui-example/components/ui 目录下，生成了一个 button.jsx。

button.jsx 具体代码如下：

import * as React from "react"
i