UI 前端

基于Radix UI和Tailwind CSS的设计精美的组件

一套设计精美的组件,您可以将其复制并粘贴到您的应用程序中,可定制。

2024年1月3日
shadcn-ui
分享

不是组件库。它是可重复使用的组件的集合,您可以将其复制并粘贴到您的应用程序中。

不是组件库是什么意思?

意思是您不用将其安装为依赖项。它不通过 npm 分发。

选择您需要的组件。将代码复制并粘贴到您的项目中,并根据您的需求进行自定义。代码是你的。

将它作为构建您自己的组件库的参考。

常见问题

为什么采用复制/粘贴而不打包为依赖项?

其背后的想法是赋予您对代码的所有权和控制权,允许您决定如何构建组件和设计样式。

从一些合理的默认值开始,然后根据您的需要自定义组件。

将组件打包在 npm 包中的缺点之一是样式与实现耦合。组件的设计应该与其实现分开。

您打算将其发布为 npm 包吗?

没有计划将其发布为 npm 包。

支持哪些框架?

您可以使用任何支持 React 的框架。Next.jsAstroRemixGatsby等。

我可以在我的项目中使用它吗?

是的。免费用于个人和商业项目。

安装

下面是如何安装依赖项并构建您的应用程序。

框架

Next.js

Vite

Remix

Gatsby

Astro

Laravel

手工安装

TypeScript

该项目和组件是用 TypeScript 编写的。我们建议您的项目也使用 TypeScript。

不过,我们也提供了组件的 JavaScript 版本。JavaScript 版本可通过cli获得。

要选择退出 TypeScript,您可以在components.json文件中用tsx做到。

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

要配置导入别名,您可以使用jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

来自:

更多文章

一个用于观看电影和节目的小型网络应用程序。

2024年1月3日 · 视频
wechatmsg
提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,分析生成年度聊天报告。
2024年1月2日 · 微信
stirling-pdf
一个本地托管的Web应用程序,允许您对PDF文件执行各种操作。
2023年12月29日 · ChatGPT PDF
self-operating-computer
OthersideAI开发人员Josh Bickett在半夜喂女儿吃饭时产生了一个开创性的新型“自操作计算机框架”的想法。
2023年12月28日 · AI