[{"data":1,"prerenderedAt":147},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fyou-should-use-shadcn-vue":3,"surround:\u002Fposts\u002F2025\u002Fyou-should-use-shadcn-vue":136},{"id":4,"title":5,"body":6,"canonical":112,"categories":113,"date":115,"description":116,"draft":117,"extension":118,"image":119,"meta":120,"navigation":121,"path":122,"permalink":112,"readingTime":123,"recommend":112,"references":112,"seo":128,"sitemap":129,"stem":130,"tags":131,"type":112,"updated":115,"__hash__":135},"content\u002Fposts\u002F2025\u002Fyou-should-use-shadcn-vue.md","或许你应该看看 shadcn-vue",{"type":7,"value":8,"toc":108},"minimark",[9,21,30,33,90,99,102,105],[10,11,12,13,20],"p",{},"在React中，",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fui.shadcn.com\u002F",[18],"nofollow","shadcn","应该已经成立vibe coding时代的主流组件库了。或许不应该叫它组件库，而应该叫它组件系统。因为shadcn的组件是可以直接拿来用的，也可以作为设计系统的基础来使用。",[10,22,23,24,29],{},"在Vue中，我们也有",[14,25,28],{"href":26,"rel":27},"https:\u002F\u002Fwww.shadcn-vue.com\u002F",[18],"shadcn-vue","这个项目。它是shadcn的Vue版本，和shadcn一样，shadcn-vue也是基于tailwindcss的。而且有新的组件也会第一时间跟进。",[10,31,32],{},"之前使用shadcn-vue时，它的组件不是很完善。目前有这几个新加的组件后，我们对比element plus，目前没有的组件只有：",[34,35,36,67],"ul",{},[37,38,39,40],"li",{},"样式组件\n",[41,42,43,46,49,52,55,58,61,64],"ol",{},[37,44,45],{},"Layout Container",[37,47,48],{},"Layout",[37,50,51],{},"Scrollbar",[37,53,54],{},"Space",[37,56,57],{},"Typography",[37,59,60],{},"Empty",[37,62,63],{},"Result",[37,65,66],{},"Descriptions",[37,68,69,70],{},"功能组件\n",[41,71,72,75,78,81,84,87],{},[37,73,74],{},"Color Picker （不常用，可以使用input加color属性实现）",[37,76,77],{},"Color Picker Panel",[37,79,80],{},"Rate",[37,82,83],{},"Transfer",[37,85,86],{},"Tree",[37,88,89],{},"Tree Select",[10,91,92,93,98],{},"这些组件有很大一部分都是样式组件，可以很方便的使用tailwindcss来实现。剩余的一些组件也可以很方便的在",[14,94,97],{"href":95,"rel":96},"https:\u002F\u002Freka-ui.com\u002F",[18],"Reka"," 这个库中找到。",[10,100,101],{},"而且社区还有人一直在提交组件并且创建之于shadcn-vue的组件库。",[10,103,104],{},"所以，如果你正在使用Vue，并且想要一个轻量级的、可定制的组件库，shadcn-vue是一个不错的选择。它不仅提供了丰富的组件，还允许你根据自己的设计需求进行定制。",[10,106,107],{},"你的公司或者项目如果正在使用tailwindcss，并且需要一个现代化的组件库，shadcn-vue绝对值得一试。",{"title":109,"searchDepth":110,"depth":110,"links":111},"",4,[],null,[114],"代码","2025-10-07 09:56:05","shadcn-vue在最近将input-group和button-group组件加进来了，和目前主流的一些组件库相比，缺失的组件已经很少了。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fmaybe-you-should-use-shadcn-vue-cover.jpg",{},true,"\u002Fposts\u002F2025\u002Fyou-should-use-shadcn-vue",{"text":124,"minutes":125,"time":126,"words":127},"2 min read",1.81,108600,362,{"title":5,"description":116},{"loc":122},"posts\u002F2025\u002Fyou-should-use-shadcn-vue",[132,19,133,134],"Vue","tailwindcss","ui-component","6DnOsTt8jG8tdIaQTLk2opDwAS2DrdCSnR0BPlaoThg",[137,142],{"title":138,"path":139,"stem":140,"date":141,"type":112,"children":-1},"五分钟内免费集成 CodeRabbit 到你的项目中","\u002Fposts\u002F2025\u002Fcoderabbitai-use","posts\u002F2025\u002Fcoderabbitai-use","2025-09-13 16:43:24",{"title":143,"path":144,"stem":145,"date":146,"type":112,"children":-1},"【翻译】编写易于编译的TypeScript代码","\u002Fposts\u002F2025\u002Ftypescript-performance","posts\u002F2025\u002Ftypescript-performance","2025-11-05 18:00:24",1789642588545]