Shadcn UI
Shadcn UI 是由开发者 shadcn 在 2023 年初创建的一个 UI 组件集合。这个项目最初的目标是为了解决 React 生态系统中的一个常见问题:如何在保持组件高度可定制的同时,提供优秀的开发者体验。
Shadcn UI 作者于 2023 年 3 月 8 日正式发布 @shadcn/ui@0.0.4 版本,不到 2 年时间,shadcn/ui 的 Star 数已经高达 73K。
Shadcn UI 核心理念
1. "不是一个组件库" 的创新理念
Shadcn UI 最显著的特点是它 "不是一个组件库"(Not a component library)。这个看似矛盾的说法实际上体现了项目的核心创新:
没有 npm 包安装 直接复制组件代码到项目中 完全可定制和可控的代码
这种方式打破了传统组件库的范式,让开发者能够完全掌控组件代码。
2. 站在巨人的肩膀
项目在成立之初就选择了一些优秀的技术基石:
Tailwind CSS 作为样式解决方案 Radix UI 作为无头组件(headless components)基础 TypeScript 确保类型安全 React 作为基础框架(拥有庞大的用户群体)
Shadcn UI 带来的巨大影响力和开发变革,Web 技术社区的开发者,也把 Shadcn UI 移植到 Vue、Angular 和 Flutter 等框架中。
来源:https://shadcn.batchtool.com/
3. 友好的开发体验
简单而强大的 CLI 工具让组件的添加变得异常简单,成为了项目成功的关键因素之一。
npx shadcn-ui@latest init
npx shadcn-ui@latest add button
Awesome Shadcn UI
https://github.com/bytefer/awesome-shadcn-ui
Awesome Shadcn UI 目前包含与 Shadcn UI 有关的 200 多个资源,共 13 个分类。涉及 UI 组件库、Landing Page 模板、SaaS 模板(接入用户认证、支付、数据库等)、Shadcn 扩展、Shadcn 工具等。
来源:https://shadcn.batchtool.com/
SaaS 模板
提供开箱即用的 SaaS 模板,让你快速开启 SaaS 项目。
UI 组件库
基于 Shadcn UI 的组件库,提供了很多开箱即用的 “酷炫” 组件。
模板
提供了很多漂亮的 Landing Page 和 Dashboard 模板,让你快速上线产品的 Landing Page。
组件
填补了 Shadcn UI 缺失的组件,从而满足不同的业务场景。
工具
基于 Shadcn UI 开发的各种常用工具
扩展
辅助开发的 IDE 扩展或 Chrome 扩展
Port
Vue、Angular、ReactNative 和 Flutter 等框架的移植版
除了上述介绍的 7 个分类之外,bytefer/awesome-shadcn-ui 还收录了其他不同的分类。如果你感兴趣的话,可以访问以下地址查看详细的信息。
https://github.com/bytefer/awesome-shadcn-ui