บทที่ 7: Component Libraries

“ทำไมต้องออกแบบโซฟาเอง ในเมื่อ IKEA มีให้เลือกเป็นร้อย?”

The Blueprint (พิมพ์เขียว)

เมื่อสร้างเว็บแอป คุณต้องมี:

• ปุ่ม, ฟอร์ม, ตาราง
• Modal, Dropdown, Tab
• DatePicker, Slider, Toast

Component Library = แค็ตตาล็อก IKEA — เฟอร์นิเจอร์สำเร็จรูปที่ประกอบเข้ากับบ้านได้ทันที

The Construction Site (หน้างานก่อสร้าง)

🛋️ ทำไมต้องใช้ Component Library?

DIY (ทำเอง)	ใช้ Library
⏰ ใช้เวลานาน	⚡ ประหยัดเวลา
🐛 อาจมี Bug	✅ ผ่านการทดสอบ
📱 ต้องทำ Responsive เอง	📱 Responsive พร้อมใช้
♿ ต้องทำ A11y เอง	♿ Accessible ในตัว

Material Selection (เลือกสเปกวัสดุ)

🎨 Component Libraries ยอดนิยม

Library	Style	ข้อดี
shadcn/ui	Minimal	Copy-paste, customize ได้เต็มที่
Ant Design	Enterprise	Components ครบ
MUI	Material Design	Google style
Chakra UI	Simple	ใช้ง่าย

⚫ shadcn/ui — Modern Choice

# ติดตั้ง
npx shadcn@latest init
npx shadcn@latest add button card table

import { Button } from "@/components/ui/button";

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>

🐜 Ant Design — Enterprise Ready

import { Button, Table, Modal, Form } from 'antd';

<Button type="primary">Primary Button</Button>
<Table columns={columns} dataSource={data} />

Architect’s Note (บันทึกสถาปนิก)

⚠️ ข้อควรระวัง

1. เลือก Library ที่เหมาะกับโปรเจกต์

   • Dashboard → Ant Design
   • Landing Page → shadcn/ui

2. Bundle Size สำคัญ — Import เฉพาะที่ใช้

3. Customization — ตรวจสอบว่าแก้ไข Theme ได้ง่ายไหม

💡 Best Practices

1. ใช้ Design Tokens สำหรับ Theming
2. สร้าง Wrapper Components เพื่อ customize
3. อ่าน Documentation ให้ละเอียด