Giới thiệu
shadcn/ui là bộ thư viện giao diện theo triết lý “copy — paste, không cài đặt”, cung cấp 59 thành phần giao diện. Đây là tài liệu tham khảo nhanh về công năng từng component — giúp bạn chọn đúng thành phần khi làm việc với Claude Code.Đặc điểm nổi bật
| Đặc điểm | Giải thích |
|---|---|
| 59 thành phần | Đủ bộ cho ứng dụng web hiện đại |
| Copy — Paste | Mã nguồn thuộc về bạn — thoải mái tuỳ chỉnh |
| Tuỳ chỉnh hoàn toàn | Thay đổi màu sắc, hình dáng, hành vi tuỳ ý |
| Không chiếm bộ nhớ | Chỉ thêm code bạn cần, không có thư viện nặng |
| React | Chỉ hỗ trợ React — code thuộc về bạn 100% |
Nhóm 1 — Hiển thị dữ liệu (Data Display)
Dùng khi bạn muốn trình bày thông tin cho người dùng nhìn thấy.
| Tên | Công dụng |
|---|---|
Accordion | Danh sách các mục có thể thu gọn/mở rộng từng mục |
Alert | Hộp thông báo nổi bật (thành công, lỗi, cảnh báo, thông tin) |
Alert Dialog | Hộp thoại xác nhận kèm thông báo cảnh báo |
Avatar | Ảnh đại diện người dùng — tròn, có chữ viết tắt nếu không có ảnh |
Badge | Nhãn nhỏ trang trí — ví dụ: “Mới”, “Hot”, “Pro” |
Calendar | Lịch cho phép xem/chọn ngày tháng năm |
Card | Khung chứa nội dung với tiêu đề, hình ảnh, chân trang |
Carousel | Thanh trình chiếu ảnh có thể vuốt trái/phải |
Chart | Biểu đồ đa dạng — đường, cột, tròn, radar |
Command | Thanh tìm kiếm kiểu Command Palette (giống Spotlight trên Mac) |
Data Table | Bảng dữ liệu có sắp xếp, tìm kiếm, phân trang |
Empty | Trạng thái “không có dữ liệu” — hiện khi danh sách/bảng trống |
Pagination | Thanh số trang khi có nhiều nội dung (Trang 1, 2, 3…) |
Progress | Thanh tiến trình cho biết công việc đang ở đâu |
Table | Bảng dữ liệu đơn giản (hàng / cột) |
Typography | Kiểu chữ — tiêu đề, đoạn văn, trích dẫn với các kích thước chuẩn |
Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)
Dùng khi bạn muốn thu thập thông tin từ người dùng.
| Tên | Công dụng |
|---|---|
Checkbox | Hộp tích chọn — có thể chọn nhiều |
Combobox | Ô tìm kiếm có gợi ý sẵn khi gõ chữ |
Date Picker | Chọn ngày tháng bằng lịch trực quan |
Field | Phần tử bao bọc một trường nhập liệu, kèm nhãn và thông báo lỗi |
Input | Ô nhập văn bản một dòng |
Input Group | Nhóm nhiều ô nhập liệu đặt cạnh nhau (ví dụ: icon + ô nhập) |
Input OTP | Ô nhập mã xác thực — gồm nhiều ô riêng biệt, mỗi ô một ký tự |
Label | Nhãn tiêu đề cho ô nhập liệu |
Native Select | Danh sách xổ xuống để chọn một mục (dùng select gốc của trình duyệt) |
Radio Group | Nhóm nút radio — chỉ chọn được một trong nhiều lựa chọn |
Select | Danh sách xổ xuống để chọn một mục (đẹp hơn Native Select) |
Slider | Thanh trượt để chọn một giá trị duy nhất |
Switch | Công tắc bật/tắt (toggle) |
Textarea | Ô nhập văn bản nhiều dòng |
Toggle | Nút bấm có trạng thái bật/tắt |
Toggle Group | Nhóm nút bấm chuyển đổi — chỉ chọn một trong nhóm |
Nhóm 3 — Điều hướng (Navigation)
Dùng khi bạn muốn dẫn dắt người dùng di chuyển giữa các phần của ứng dụng.
| Tên | Công dụng |
|---|---|
Breadcrumb | Đường dẫn phân cấp (ví dụ: Trang chủ > Sản phẩm > Áo thun) |
Context Menu | Menu hiện ra khi bấm chuột phải vào phần tử |
Direction | Công cụ hỗ trợ thay đổi hướng giao diện (trái → phải / phải → trái — hữu ích cho đa ngôn ngữ) |
Dropdown Menu | Menu xổ xuống khi bấm vào nút hoặc navigation item |
Menubar | Thanh menu kiểu ứng dụng desktop (File, Edit, View…) |
Navigation Menu | Thanh điều hướng chính của website |
Pagination | Thanh số trang khi có nhiều nội dung (Trang 1, 2, 3…) |
Sidebar | Thanh bên trái chứa menu điều hướng |
Tabs | Thanh tab để chuyển đổi giữa nhiều nội dung khác nhau |
Nhóm 4 — Lớp phủ & Cửa sổ (Overlay)
Dùng khi bạn muốn hiện thêm nội dung nổi lên trên nội dung chính.
| Tên | Công dụng |
|---|---|
Dialog | Hộp thoại bật lên giữa màn hình, có nền mờ che nội dung phía sau |
Drawer | Bảng điều khiển trượt ra từ cạnh màn hình (trái/phải/trên/dưới) |
Hover Card | Cửa sổ nhỏ hiện khi di chuột qua một phần tử |
Popover | Cửa sổ nhỏ bật ra khi bấm vào một phần tử |
Sheet | Bảng điều khiển trượt ra từ cạnh màn hình (tối ưu cho mobile) |
Tooltip | Dòng chú thích nhỏ hiện khi di chuột vào một phần tử |
Nhóm 5 — Thông báo & Phản hồi (Feedback)
Dùng khi bạn muốn thông báo điều gì đó cho người dùng.
| Tên | Công dụng |
|---|---|
Alert | Hộp thông báo nổi bật (thành công, lỗi, cảnh báo, thông tin) |
Alert Dialog | Hộp thoại xác nhận kèm thông báo cảnh báo |
Progress | Thanh tiến trình cho biết công việc đang ở đâu |
Skeleton | Đường gạch chờ tải — giúp giao diện không “nhảy” khi đang load |
Sonner | Thông báo ngắn bật lên ở góc màn hình (thành công, lỗi…) — phiên bản nâng cấp của Toast |
Spinner | Vòng xoay chờ tải (loading indicator) |
Toast | Thông báo ngắn bật lên ở góc màn hình (thành công, lỗi…) |
Nhóm 6 — Bố cục & Cấu trúc (Layout)
Dùng khi bạn muốn sắp xếp, tổ chức không gian trên màn hình.
| Tên | Công dụng |
|---|---|
Aspect Ratio | Giữ tỷ lệ khung hình cố định (ví dụ: ảnh 16:9) |
Collapsible | Phần nội dung có thể thu gọn/mở rộng bằng một nút bấm |
Resizable | Vùng giao diện có thể kéo thay đổi kích thước bằng cách kéo cạnh |
Scroll Area | Vùng cuộn tuỳ chỉnh, có thanh cuộn đẹp |
Separator | Đường kẻ phân cách ngang hoặc dọc |
Sheet | Bảng điều khiển trượt (thuộc cả Overlay) |
Sidebar | Thanh bên điều hướng (thuộc cả Navigation) |
Spacer | Khoảng trống tuỳ chỉnh giữa các phần tử |
Nhóm 7 — Hành động & Tương tác (Actions)
Dùng khi bạn muốn người dùng thao tác với ứng dụng.
| Tên | Công dụng |
|---|---|
Button | Nút bấm cơ bản có nhiều kiểu (mặc định, outline, ghost, destructive…) và kích thước (sm, md, lg) |
Button Group | Nhóm nhiều nút bấm xếp cạnh nhau thành một khối thống nhất |
Kbd | Hiển thị phím bấm trên bàn phím (ví dụ: Ctrl + S) |
Nhóm 8 — Tiện ích (Utilities)
Các công cụ hỗ trợ giúp xây dựng giao diện linh hoạt hơn.
| Tên | Công dụng |
|---|---|
Direction | Công cụ hỗ trợ thay đổi hướng giao diện (thuộc cả Navigation) |
Item | Phần tử con dùng bên trong các danh sách, menu, combobox — định nghĩa từng mục |
Visually Hidden | Ẩn nội dung khỏi mắt nhưng vẫn đọc được bởi trình đọc màn hình (accessibility) |
Tổng hợp theo nhóm
| Nhóm | Số thành phần | Dùng khi nào |
|---|---|---|
| Hiển thị dữ liệu | 16 | Trình bày thông tin |
| Nhập liệu & Biểu mẫu | 16 | Thu thập dữ liệu từ người dùng |
| Điều hướng | 9 | Dẫn dắt người dùng di chuyển |
| Lớp phủ & Cửa sổ | 6 | Hiện cửa sổ/dialog nổi trên nội dung |
| Thông báo & Phản hồi | 7 | Thông báo trạng thái |
| Bố cục & Cấu trúc | 8 | Sắp xếp không gian |
| Hành động & Tương tác | 3 | Thao tác của người dùng |
| Tiện ích | 3 | Hỗ trợ đặc biệt |
Tổng cộng: 59 thành phần — thiết kế hiện đại, tối giản, code thuộc về bạn 100%.
Danh sách site tham khảo sử dụng shadcn/ui:
- Discover community registries for shadcn/ui components and blocks.
https://ui.shadcn.com/docs/directory?page=17
Tham khảo
- Trang chính thức: ui.shadcn.com
- Danh sách thành phần: ui.shadcn.com/docs/components
- Tham khảo thêm: blocks.shadcn.com
- Tham khảo thêm: reui.io