shadcn/ui

UI/UX

UI/UXMiễn phíĐộ khó: Trung bình

shadcn/ui

4.5/5Đánh giá của 2dm

Component đẹp, sửa tự do; lựa chọn phổ biến cho web React.

Bộ component giao diện cho React và Tailwind CSS, sao chép mã vào dự án rồi tuỳ biến.

Mở trang chính thức Xem cách dùng

Giới thiệu

shadcn/ui là bộ component giao diện được thiết kế sẵn, chú trọng khả năng truy cập, đi kèm một cơ chế phân phối mã nguồn. Điểm khác biệt lớn nhất: đây không phải thư viện cài từ npm rồi import như thông thường, mà công cụ CLI sẽ chép thẳng mã nguồn component vào dự án của bạn.

Vì mã nằm ngay trong thư mục components/ui của dự án, đội dev có thể sửa trực tiếp thay vì phải ghi đè style hay bọc thêm lớp. Các component dùng chung một kiểu giao tiếp thống nhất, nên cả lập trình viên lẫn mô hình AI đều dễ đọc, chỉnh và sinh thêm.

Tính năng nổi bật

Mã nguồn mở trong dự án

Component được chép vào codebase của bạn, muốn đổi gì thì sửa thẳng file, không bị khóa bởi thư viện bên ngoài.

CLI cài từng component

Lệnh init để thiết lập, lệnh add để thêm đúng component cần dùng như button hay card.

Giao diện mặc định đẹp

Các component có style được chọn kỹ, dùng riêng lẻ hay ghép với nhau đều hài hòa.

Thiết kế để kết hợp

Mọi component chia sẻ cùng một cách dùng, giúp code dễ đoán và dễ bảo trì.

Thân thiện với AI

Mã mở và API nhất quán giúp công cụ AI đọc hiểu, chỉnh sửa và tạo component mới chính xác hơn.

Tùy biến preset

Có thể chọn phong cách, màu sắc, font và bộ icon khi khởi tạo dự án.

Dùng để làm gì

Trang quản trị nội bộ

Dựng màn hình quản lý đơn hàng, khách hàng với bảng, form, hộp thoại đồng bộ phong cách.

Landing page bán khóa học

Ghép nhanh các khối card, button, form đăng ký mà vẫn giữ nhận diện thương hiệu.

Dashboard báo cáo

Tạo giao diện theo dõi số liệu bán hàng gọn gàng cho chủ doanh nghiệp xem hằng ngày.

Prototype sản phẩm SaaS

Đội dev nhỏ có bộ khung UI chuẩn ngay từ đầu, rút ngắn thời gian làm giao diện.

Làm việc cùng AI coding

Dùng chung với các trợ lý AI để sinh và chỉnh component theo yêu cầu.

Cách dùng

1
Tạo dự án Next.js
Nếu chưa có dự án, khởi tạo một ứng dụng Next.js mới.
$pnpm create next-app@latest
2
Khởi tạo shadcn/ui
Chạy lệnh init trong thư mục dự án để cấu hình và chọn preset giao diện.
$pnpm dlx shadcn@latest init
3
Thêm component cần dùng
Cài từng component, ví dụ button, mã sẽ được chép vào thư mục components/ui.
$pnpm dlx shadcn@latest add button
4
Import và sử dụng
Import component từ thư mục components/ui của dự án và đặt vào trang.
5
Tùy chỉnh theo thương hiệu
Mở file component để chỉnh màu, bo góc, khoảng cách cho khớp nhận diện doanh nghiệp.

Video hướng dẫn

Shadcn UI Crash Course #1 - Introduction & Setup
Net Ninja

Everyone Is Missing What Makes NEW Shadcn Update Amazing
Web Dev Simplified

Shadcn UI - Cách tiếp cận mới với thư viện UI Component
Code Đủ Thứ

Ví dụ thực tế

Tình huống minh hoạ

Một công ty phân phối mỹ phẩm ở TP.HCM muốn có trang quản lý đại lý riêng thay vì dùng bảng tính. Lập trình viên duy nhất của công ty tạo dự án Next.js, khởi tạo shadcn/ui rồi thêm các component card, button, form và bảng. Vì mã nằm sẵn trong dự án, anh chỉnh màu chủ đạo theo logo công ty và đổi nhãn sang tiếng Việt trực tiếp trong file, sau đó dùng trợ lý AI sinh thêm màn hình chi tiết đại lý theo cùng phong cách.

Mẹo & lưu ý

Chỉ thêm component cần thiết
Cài đúng thứ đang dùng để thư mục components gọn và dễ bảo trì.
Xem mã như tài sản của mình
Vì code nằm trong dự án, hãy commit và review như mọi phần code khác.
Chốt preset từ đầu
Chọn màu, font, icon ngay khi init để cả đội dùng chung một hệ thống giao diện.
Tận dụng AI
API nhất quán giúp AI sinh component chính xác hơn, hãy mô tả rõ tên component muốn dùng.