shadcn/ui - UI / UX - Technical Documents

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

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

Tổng quan

Tạo tài khoản và thiết lập

Development tools

Kiến thức nền tảng

Công nghệ

Kiến trúc phần mềm

Thực chiến

shadcn/ui - UI / UX

Giới thiệu

Đặc điểm nổi bật

Nhóm 1 — Hiển thị dữ liệu (Data Display)

Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)

Nhóm 3 — Điều hướng (Navigation)

Nhóm 4 — Lớp phủ & Cửa sổ (Overlay)

Nhóm 5 — Thông báo & Phản hồi (Feedback)

Nhóm 6 — Bố cục & Cấu trúc (Layout)

Nhóm 7 — Hành động & Tương tác (Actions)

Nhóm 8 — Tiện ích (Utilities)

Tổng hợp theo nhóm

Danh sách site tham khảo sử dụng shadcn/ui:

Tham khảo

​Giới thiệu

​Đặc điểm nổi bật

​Nhóm 1 — Hiển thị dữ liệu (Data Display)

​Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)

​Nhóm 3 — Điều hướng (Navigation)

​Nhóm 4 — Lớp phủ & Cửa sổ (Overlay)

​Nhóm 5 — Thông báo & Phản hồi (Feedback)

​Nhóm 6 — Bố cục & Cấu trúc (Layout)

​Nhóm 7 — Hành động & Tương tác (Actions)

​Nhóm 8 — Tiện ích (Utilities)

​Tổng hợp theo nhóm

​Danh sách site tham khảo sử dụng shadcn/ui:

​Tham khảo

Giới thiệu

Đặc điểm nổi bật

Nhóm 1 — Hiển thị dữ liệu (Data Display)

Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)

Nhóm 3 — Điều hướng (Navigation)

Nhóm 4 — Lớp phủ & Cửa sổ (Overlay)

Nhóm 5 — Thông báo & Phản hồi (Feedback)

Nhóm 6 — Bố cục & Cấu trúc (Layout)

Nhóm 7 — Hành động & Tương tác (Actions)

Nhóm 8 — Tiện ích (Utilities)

Tổng hợp theo nhóm

Danh sách site tham khảo sử dụng shadcn/ui:

Tham khảo