shadcn/ui
AI bổ sungNó là gì?
Bộ component UI không có runtime (headless) được xây dựng trên Radix UI + Tailwind CSS. Code component được copy thẳng vào repo (không cài package), cho phép tùy biến hoàn toàn mọi dòng CSS/JS.
Dùng để làm gì?
Xây dựng dashboard, admin panel, SaaS, form phức tạp, data table, dialog, tooltip, dropdown, calendar... với giao diện nhất quán, accessible (a11y) sẵn sàng production.
Chạy ở đâu?
Browser (React/Next.js client components), Server (Next.js RSC — component không dùng useEffect/client-only có thể render trên server).
Nó thường đi với gì?
Next.js (App Router/Pages), Tailwind CSS, Radix UI primitives, React Hook Form + Zod, Lucide icons, class-variance-authority (cva), clsx/tailwind-merge.
App của mình khi nào cần?
Cần UI đẹp, accessible, có thể custom sâu, không muốn bị khóa vào design system nặng (MUI, AntD). Phù hợp team muốn sở hữu code component để sửa bug/đổi style ngay lập tức.
Khi nào không cần?
Dự án cực nhỏ chỉ cần vài button/input (dùng Tailwind thuần nhẹ hơn), team không rành React/Tailwind, cần component sẵn có sẵn sàng không cần config (như MUI, Chakra).
Từ khóa lỗi thường gặp
"use client" missing (khi dùng component có state trong RSC), Tailwind class not applied (content paths sai), Radix portal/z-index conflict, Hydration mismatch (server/client UI khác nhau).
Một câu để nhớ
Copy-paste component, own your UI, Radix + Tailwind = shadcn.