跳到内容

shadcn.io:为 shadcn/ui 寻找新 blocks 的最佳去处

组件只是起点,真正能把整页一口气搞定的是 blocks。要找又新又能直接上线的 shadcn/ui blocks,shadcn.io 已经成了我们的最爱。这就来说说原因。

如果你用 shadcn/ui 开发,那你早就领教过它的魔力了:代码归你所有。没有黑箱般的依赖要去对抗——你把一个组件复制进来,它就任你雕琢。

但组件只是小零件。一个按钮、一个输入框、一张卡片。真正吞掉时间的,是把这些零件拼装成 blocks——一个价格板块、一层仪表盘骨架、一个认证页面、一个功能网格。大部分工作(以及大部分「从旧项目里复制粘贴」)其实都发生在那里。

这正是 shadcn.io 填补的空白,也是我们把它当成首选的原因。

shadcn.io 是什么?

shadcn.io 是一个规模庞大、还在活跃成长的 blocks 注册表,构建在 shadcn/ui 之上——都是可以直接放进页面、拿去发布的完整、组合好的板块。不是基础组件,而是那种你自己动手搭要耗掉一下午的布局。

每个 block 都遵循和 shadcn/ui 本身一样的哲学:是归你所有的普通代码,用 Tailwind 做样式,没有运行时的绑定。你把它装进来,它就成了你代码库的一部分。

为什么它是寻找新 blocks 的最佳去处

有几点让它与众不同:

  • 广度。 营销板块、仪表盘、表格、认证流程、价格、用户评价——这份目录覆盖了真实产品真正需要的页面,而不只是零星几个 demo。
  • 够新。 新的 block 会定期上架,所以你用的是当下的模式,而不是一年前最后动过的东西。
  • 是复制粘贴,而不是装完祈祷。 因为 block 是由 shadcn/ui 的基础组件组合而成的,读起来就像你自己会写的代码——好定制,也好套主题。
  • 和注册表配合得很好。 block 直接嵌进你已经在用的那套 shadcn 工作流,没有什么新东西要学。

我们是怎么用它的

我们自己的流程很简单:从一个已经完成了 80% 的 shadcn.io block 起头,再把剩下的 20% 掰成契合品牌的样子。因为代码归你所有,最后那 20% 不值一提——换掉 token,调一调间距,搞定。它把「设计一个价格页」从一天变成了一个小时。

Neobrutalism ♥ shadcn.io

我们很自豪能和 shadcn.io 成为合作伙伴。如果你喜欢 Neobrutalism 对 shadcn/ui 的那套新粗野主义诠释,那你在他们的 block 库里也会宾至如归——一样的所有权模式、一样的 Tailwind 底子,覆盖的范围却广得多。

shadcn.io 逛逛这个合集,感受一下当 blocks 都已就绪时,一个页面能多快成型。


← 返回博客