哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!
使用 Radix UI 和 Tailwind CSS 构建的设计精美的组件,支持 Toast、Toggle、Toggle Group、Toolbar、 Navigation Menu。
项目地址:https://github.com/shadcn/ui
这不是一个组件库。它是可重复使用的组件的集合,您可以将其复制并粘贴到您的应用中。
不是组件库是什么意思?
我的意思是您不要将其安装为依赖项。它不可用或通过 npm 分发。
选择您需要的组件。将代码复制并粘贴到您的项目中,并根据您的需求进行自定义。代码是你的。
如何安装?
我们可以在Next.js、Vite、Remix、Laravel等中安装依赖和构建应用。
首先使用以下命令创建一个新的 React 项目:vite
复制
安装及其对等依赖项,然后生成 和 文件:tailwindcsstailwind.config.jspostcss.config.js
复制
将以下代码添加到文件中以解析路径:tsconfig.json
复制
将以下代码添加到 vite.config.ts,以便应用可以无错误地解析路径
复制
复制
运行 init 命令以设置项目:shadcn-ui
复制
系统将询问您几个要配置的问题:components.json
复制
现在,您可以开始向项目添加组件。
复制
上面的命令会将组件添加到您的项目中。然后,您可以像这样导入它:Button
End