shadcn/ui大更新:增加侧边栏sidebar!

2,251 阅读3分钟

shadcn/ui介绍

shadcn/ui 是一个构建 UI 组件的工具库,它基于 Radix UI 和 Tailwind CSS,为开发者提供了一套高质量、可自定义的 React 组件。这些组件既可以直接用于项目,又支持根据需求进行高度定制,使得开发者能够在构建现代化 UI 时快速上手。

这是我用shadcn/ui做的一个web开发框架,演示地址
账号:admin
密码:admin123

核心特点

  1. Radix UI 基础shadcn/ui 组件库使用 Radix UI 作为底层,提供一套无障碍且结构化的基础组件。例如,模态框、下拉菜单、切换按钮等。
  2. 支持 Tailwind CSS:通过 Tailwind CSS 可以轻松定制样式,所有组件的样式均通过 Tailwind 实现,方便开发者根据设计规范快速调整主题、间距、颜色等。
  3. 按需导入组件:组件支持按需导入,开发者可以选择所需的组件导入项目,不需要引入整个库。这种灵活性帮助减少打包体积。
  4. 深度定制shadcn/ui 鼓励开发者根据需求自定义组件,以适应项目独特的设计需求。组件的结构和样式都可以根据 Tailwind 配置进行调整。
  5. 无框架依赖shadcn/ui 本质上是一个代码生成工具,没有锁定依赖或框架,开发者可以自由决定如何构建和导入。

适用场景

shadcn/ui 非常适合需要快速搭建、可定制 UI 的 React 项目。它让开发者可以拥有组件库的便捷性,同时又不失灵活性,适合对组件定制有较高要求的场景,例如企业内网系统、管理后台等。

优缺点

优点:

  • 高度可定制,符合 Tailwind 设计哲学。
  • 组件无锁定依赖,可以完全控制代码。
  • 兼具无障碍支持和响应式设计。

缺点:

  • 需要熟悉 Tailwind CSS 以充分利用其定制性。
  • 不像传统组件库直接提供所有组件,需要手动生成组件文件。

大更新:sidebar

在我开发xryder这个web开发框架之前,shadcn是没有侧边栏这个组件的。最近查看它的官网发现已经上线了sidebar,而且blocks中案例也全部围绕sidebar进行重新设计。

image.png

官网对他的描述是:一个可组合、可主题化和可定制的侧边栏组件

在没有sidebar之间,我们使用shadcn的时候,需要自己去构建layout,也就是页面布局。现在有了sidebar,就可以很轻松的构建带导航栏的页面布局了。

image.png

怀着激动的心情,我已经迫不及待的要将sidebar加入到开发中的WEB开发框架中了。

最后

如果你还没开始尝试shadcntailwindcss,我建议你快来试试,享受自由建造的乐趣!

惊喜🚀🚀🚀

基于Vite、React、Tailwind和shadcn的开发框架已开源X.Ryder。体验地址:xryder.cn。