ใช้ยังไง
ทุกอันเป็น ของฟรี โอเพนซอร์สของทีมอื่น (เครดิตเป็นของผู้สร้าง) — กด "เปิด GitHub" ไปโหลด/ดูวิธีใช้ได้เลย · เวลาสั่ง AI สร้างงาน บอกได้ว่า "ใช้ [ชื่อ repo]" เช่น "ใช้ไอคอน Lucide, ใช้ Tailwind"
Components (ชิ้นส่วน UI)
shadcn/ui
github.com/shadcn-ui/ui
ชุด component ก๊อป-วางได้ (Tailwind + Radix) ที่นิยมสุดตอนนี้
✓ ฐานดีมาก — แต่ต้องปรับสี/ฟอนต์เป็นแบรนด์ตัวเองไม่งั้นเป็น slop
เปิด GitHub
Radix UI
github.com/radix-ui/primitives
component ไร้สไตล์ที่ "เข้าถึงได้" (accessible) — dropdown, dialog, tooltip ที่ทำงานถูกต้อง
✓ ได้เรื่อง keyboard/accessibility ฟรี
เปิด GitHub
Tailwind CSS
github.com/tailwindlabs/tailwindcss
ระบบ utility class จัดสไตล์เร็ว — ฐานของเว็บโมเดิร์นเกือบทั้งหมด
✓ AI เขียน Tailwind เก่งมาก
เปิด GitHub
Magic UI
github.com/magicuidesign/magicui
component สวย ๆ มี animation พร้อมใช้ (เข้ากับ shadcn)
✓ ใช้เน้นจุดเด่น (อย่าใส่ทุกที่)
เปิด GitHub
ไอคอน (เลิกใช้ emoji เกลื่อน)
Lucide
github.com/lucide-icons/lucide
ไอคอนเส้นสะอาด ~1,500 ตัว (เว็บนี้ก็ใช้)
✓ แทน emoji ให้ดูโปร
เปิด GitHub
Tabler Icons
github.com/tabler/tabler-icons
ไอคอนเส้นฟรี 5,000+ ตัว ครบทุกหมวด
✓ เยอะที่สุด หาเจอเกือบทุกอย่าง
เปิด GitHub
Phosphor Icons
github.com/phosphor-icons/core
ไอคอนมี 6 น้ำหนัก (บาง-หนา-ทึบ) ยืดหยุ่นมาก
✓ มีคาแรกเตอร์ เลือกน้ำหนักได้
เปิด GitHub
Heroicons
github.com/tailwindlabs/heroicons
ไอคอนจากทีม Tailwind เข้ากับงาน clean
✓ เรียบ ใช้ง่าย
เปิด GitHub
ฟอนต์ (เลิก default)
Fontsource
github.com/fontsource/fontsource
โหลดฟอนต์ Google Fonts มาเก็บไว้ในโปรเจกต์เอง (เร็ว+ไม่พึ่ง CDN)
✓ มีฟอนต์ไทยสวย ๆ ให้เลือกเยอะ
เปิด GitHub
Geist Font
github.com/vercel/geist-font
ฟอนต์ของ Vercel — clean สาย dev/SaaS
✓ ดูโปรแบบ Vercel/Linear
เปิด GitHub
สี & Design Tokens (เลิกม่วง AI)
Open Props
github.com/argyleink/open-props
ตัวแปร CSS สำเร็จ (สี เงา ระยะ ฟอนต์) — ใช้แทนการสุ่มค่าเอง
✓ ตรงข้อ "design tokens" พอดี
เปิด GitHub
Radix Colors
github.com/radix-ui/colors
ชุดสีที่ออกแบบมาให้ contrast ถูก ใช้คู่กันสวย
✓ เลือกสีแบรนด์ที่ไม่ใช่ม่วง default
เปิด GitHub
Open Color
github.com/yeun/open-color
พาเลตสีโอเพนซอร์ส 13 สี × 10 เฉด พร้อมใช้
✓ มีสีให้เลือกเยอะกว่าม่วง
เปิด GitHub
กราฟ & Dashboard
Tremor
github.com/tremorlabs/tremor
component ทำ Dashboard (KPI card, กราฟ, ตาราง) พร้อมใช้
✓ ตรงกับเรื่อง "ทำ Dashboard เอง"
เปิด GitHub
Recharts
github.com/recharts/recharts
ทำกราฟ (เส้น/แท่ง/วงกลม) ใน React ง่าย ๆ
✓ AI ใช้ตัวนี้ทำกราฟบ่อย
เปิด GitHub
Chart.js
github.com/chartjs/Chart.js
ไลบรารีกราฟยอดนิยม ใช้ได้ทุกเว็บ (ไม่ต้อง React)
✓ เบา ใช้ง่าย
เปิด GitHub
Animation (ทำให้รู้สึกดี)
Motion (Framer Motion)
github.com/framer/motion
ทำ animation/transition ใน React ลื่น ๆ ควบคุม easing ได้
✓ ตรงคำสอน Emil Kowalski
เปิด GitHub
AutoAnimate
github.com/formkit/auto-animate
ใส่บรรทัดเดียว → รายการเพิ่ม/ลบมี animation นุ่ม ๆ อัตโนมัติ
✓ ง่ายสุดสำหรับมือใหม่
เปิด GitHub
ไม่รู้จะเริ่มจากอันไหน? ใช้สแต็กนี้
ของในหน้านี้เยอะ ไม่ต้องเลือกทุกหมวดเอง — นี่คือชุดที่เข้ากันดี ใช้ด้วยกันบ่อย และ AI เขียนเก่ง เริ่มจากชุดนี้ก่อน แล้วค่อยสลับตัวทีหลังได้
ฐาน + Component
Tailwind + shadcn/ui
ไอคอน
Lucide
สี
Radix Colors
ฟอนต์
Fontsource (ไทย)
กราฟ
Recharts
Animation
AutoAnimate
ก๊อปวางต่อท้ายคำสั่ง AI ของคุณ
ใช้ Tailwind + shadcn/ui เป็นฐาน, ไอคอน Lucide (ห้ามใช้ emoji แทนไอคอน),
สีเลือกจาก Radix Colors โทนเทา (slate/gray) + สีแบรนด์ 1 สีที่ไม่ใช่ม่วง default,
ฟอนต์หัวเรื่องกับเนื้อหาคนละตัว, กราฟใช้ Recharts.
เน้นช่องไฟกว้าง ลำดับชั้นชัด พื้นขาว — ห้าม gradient ม่วงฟุ้งและการ์ดเงาหนา ๆ
หมายเหตุ:ทั้งหมดเป็นของฟรี-โอเพนซอร์สของทีมอื่น (เครดิตเป็นของผู้สร้าง) — repo อาจย้าย/เปลี่ยนชื่อได้ ถ้าลิงก์ไหนเปิดไม่ได้ ลองค้นชื่อใน GitHub ได้เลย
รวบรวมโดย พี่ปุ้ย ปริวรรตน์ อรุโณทยานันท์ (repo เป็นเครดิตของผู้สร้างแต่ละทีม)
ผู้เชี่ยวชาญวางระบบองค์กร & AI — สอนเจ้าของกิจการสร้างระบบของตัวเองมากกว่า 400 คน
ประวัติพี่ปุ้ย · ดูคอร์ส →