shadcn/ui
เวลาอ่านโดยประมาณ: ~15 นาที
shadcn/ui
shadcn/ui เป็นคอลเลกชันของคอมโพเนนต์ UI ที่สร้างด้วย Radix UI และ Tailwind CSS ซึ่งออกแบบมาให้คุณสามารถคัดลอกโค้ดมาใช้ในโปรเจกต์ของคุณได้โดยตรง ไม่ใช่เป็น dependency ที่ติดตั้งผ่าน npm แต่เป็นการนำเข้าโค้ดที่คุณสามารถแก้ไขและปรับแต่งได้อย่างเต็มที่
ทำไมเราถึงเลือก shadcn แทน Tailwind เพียวๆ
"เราไม่ได้เกลียด Tailwind แต่การใช้ Tailwind เพียวๆ หมายถึงต้องคิด component เองเยอะ, boilerplate สูง, และซ้ำๆ ในหลายโปรเจกต์"
การตัดสินใจ
เราพิจารณาใช้ Tailwind CSS อย่างเดียว แต่เลือกใช้ shadcn/ui แทน นี่คือเหตุผล:
ทำไมไม่ใช้ Tailwind เพียวๆ?
- ต้องคิด component design เองเยอะมาก
- Boilerplate สูง
- ซ้ำๆ ในหลายโปรเจกต์
shadcn ให้อะไรเราบ้าง:
- มี component ให้เริ่มใช้ได้ทันที
- ยังเป็น Tailwind ใต้ hood
- ปรับแต่งง่าย
- AI เข้าใจ Tailwind ดีกว่า CSS styling แบบอื่น
สรุปคือ:
"เขียนน้อยลง แต่ยังควบคุมได้เต็มที่"
ข้อดี-ข้อเสีย
| ข้อดี | ข้อเสีย |
|---|---|
| Copy-paste, customize ได้เต็มที่ | ต้องเข้าใจ Radix UI primitives |
| Tailwind ใต้ hood | ไม่ใช่ npm package แบบปกติ |
| AI ช่วยได้ดี | ต้อง update manually |
| Styling สวยตั้งแต่แรก | บาง component ต้อง adapt |
| ควบคุมโค้ดได้เต็มที่ | Learning curve สำหรับ customization |
| Accessibility built-in | Bundle ใหญ่ขึ้นถ้าใช้หลาย component |
การติดตั้ง
ตัวอย่างการใช้งาน
ตัวอย่างการสร้างปุ่มด้วย shadcn/ui:
คอมโพเนนต์ที่มี
shadcn/ui มีคอมโพเนนต์ให้เลือกใช้มากมาย เช่น:
- Button - ปุ่มกด
- Card - การ์ดแสดงข้อมูล
- Dialog - กล่องโต้ตอบ
- Form - ฟอร์มกรอกข้อมูล
- Table - ตารางข้อมูล
และอีกมากมาย...
เริ่มต้นใช้งาน
- ติดตั้ง shadcn/ui CLI
- กำหนดค่าใน
components.json - เพิ่มคอมโพเนนต์ที่ต้องการ
- นำเข้าและใช้งานในโปรเจกต์ของคุณ
แหล่งข้อมูลเพิ่มเติม
เอกสารอย่างเป็นทางการ
- shadcn/ui Documentation - เอกสารและไลบรารีคอมโพเนนต์อย่างเป็นทางการ
- shadcn/ui GitHub Repository - ซอร์สโค้ดและการพูดคุย
- Radix UI - คอมโพเนนต์พื้นฐานที่ใช้เป็นฐาน
แนะนำสำหรับการเรียนรู้เพิ่มเติม
- shadcn/ui Examples - ตัวอย่างแอปพลิเคชันเต็มรูปแบบ
- shadcn/ui Themes - ธีมที่สร้างไว้แล้ว
- shadcn/ui CLI - เอกสาร CLI
- Building with shadcn/ui - คู่มือการกำหนดค่า