技术栈详解
16.5 shadcn ui 餐厅的现成家具
餐厅比喻
你的Twitter餐厅装修好了,现在需要家具。
自己做家具
- 自己砍树
- 自己做木工
- 做桌子、椅子、柜子
- 很累,做出来可能还不好看
买现成家具(shadcn/ui)
就像去宜家买家具:
- 拿现成的桌子
- 拿现成的椅子
- 拿现成的柜子
- 而且拿回来后,你可以改颜色、改大小
shadcn/ui就是餐厅的现成家具!
技术上,shadcn/ui是什么?
shadcn/ui是一个组件库,但特别之处是:
- 不是npm包(不安装到node_modules)
- 是代码片段(复制到你的项目)
- 你拥有源码(可以随便改)
就像买家具后,家具是你的,想怎么改就怎么改!
用Twitter来理解
场景:需要一个输入框
自己做:
function Textarea() {
return (
<textarea
className="w-full p-3 border rounded-lg"
placeholder="有什么新鲜事?"
/>
);
}
用shadcn/ui:
npx shadcn@latest add textarea
import { Textarea } from '@/components/ui/textarea';
<Textarea placeholder="有什么新鲜事?" />
就像直接拿现成的家具!
shadcn/ui的超能力
超能力1:拥有源码
就像家具是你的:
- 传统组件库:租的家具,不能改
- shadcn/ui:买的家具,想改就改
超能力2:只拿需要的
就像只买需要的家具:
- 传统组件库:买整套家具(5MB)
- shadcn/ui:只买需要的(5KB)
超能力3:与Tailwind配合
就像家具和装修配套:
- 家具用的是同样的装修贴纸
- 可以直接改样式
为什么Vibe Coding选shadcn/ui?
- 质量高 - 家具设计得很好
- 可定制 - 拥有源码,随便改
- 与Tailwind配合 - 完美集成
- AI友好 - AI知道怎么用
记住这些要点
- shadcn/ui = 现成家具
- 拥有源码(家具是你的)
- 只拿需要的(不用买整套)
- 可以改(想怎么改就怎么改)
下一步
翻到16.6节,认识PostgreSQL - 餐厅的食材仓库!