不到 2 年拿下 73K Star 的前端开源项目!

科技   2024-10-27 10:50   福建  

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

全栈修仙之路
专注分享 TS、Vue3、前端架构和源码解析等技术干货。
 最新文章