Giới thiệu
Arco Design là bộ thư viện giao diện do ByteDance phát triển, cung cấp 72 thành phần giao diện dành cho ứng dụng doanh nghiệp. Đâ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 |
|---|---|
| 72 thành phần | Đủ bộ cho mọi ứng dụng doanh nghiệp |
| Phát triển bởi ByteDance | Đơn vị đứng sau TikTok và sản phẩm enterprise |
| React & Vue | Hỗ trợ cả React và Vue — linh hoạt theo dự án |
| TypeScript | Mã nguồn viết bằng TypeScript — dễ bảo trì |
| Hơn 1000 icon | Thư viện icon tích hợp sẵn, không cần cài thêm |
| Ecosystem | Arco CLI, Design Lab, Material Market, Icon Box |
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 |
|---|---|
Avatar | Ảnh đại diện người dùng — tròn, có chữ viết tắt nếu không có ảnh |
Badge | Số thông báo nhỏ hiện trên icon, nhãn “New” |
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 |
Collapse | Danh sách các mục có thể thu gọn/mở rộng từng mục |
Comment | Khung bình luận — avatar, tên, thời gian, nội dung |
Descriptions | Bảng mô tả hiện danh sách thuộc tính và giá trị |
Empty | Trạng thái “không có dữ liệu” — hiện khi danh sách/bảng trống |
Image | Ảnh có tính năng phóng to, xem toàn màn hình |
List | Danh sách hiện dữ liệu dạng danh sách có phân trang |
Popover | Cửa sổ nhỏ bật ra khi bấm hoặc di chuột vào một phần tử |
Statistic | Hiển thị số liệu lớn — ví dụ: số đơn hàng, doanh thu |
Table | Bảng dữ liệu có sắp xếp, tìm kiếm, phân trang, lọc |
Tabs | Thanh tab để chuyển đổi giữa nhiều nội dung khác nhau |
Tag | Thẻ nhãn nhỏ — ví dụ: “Mới”, “Hot”, “Pro” |
Timeline | Dòng thời gian hiện các sự kiện theo thứ tự |
Tooltip | Dòng chú thích nhỏ hiện ra khi di chuột vào một phần tử |
Tree | Cây thư mục hiện cấu trúc phân cấp có thể thu gọn |
Watermark | Hình mờ chồng lên phần tử — dùng để bảo vệ bản quyề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 |
|---|---|
AutoComplete | Ô tìm kiếm có gợi ý sẵn khi gõ chữ |
Cascader | Chọn địa chỉ/danh mục phân cấp nhiều tầng |
Checkbox | Hộp tích chọn — có thể chọn nhiều |
ColorPicker | Bảng chọn màu trực quan |
DatePicker | Chọn ngày tháng bằng lịch trực quan |
Form | Biểu mẫu tổng hợp kèm validation (kiểm tra lỗi nhập liệu) |
Input | Ô nhập văn bản một dòng |
InputNumber | Ô nhập chỉ cho phép nhập số, có nút tăng/giảm |
InputTag | Ô nhập tag — người dùng nhập từ khoá rồi bấm Enter để tạo tag |
Mentions | Gợi ý @mentions kiểu mạng xã hội (nhắc tên người dùng) |
Radio | Nút radio — chỉ chọn được một trong nhiều lựa chọn |
Rate | Thang đánh giá sao (1-5 sao) |
Select | Danh sách xổ xuống để chọn một hoặc nhiều mục |
Slider | Thanh trượt để chọn giá trị trong một khoảng |
Switch | Công tắc bật/tắt (toggle) |
TimePicker | Chọn giờ phút |
Transfer | Chuyển đổi giữa hai danh sách — chọn/di chuyển nhiều mục |
TreeSelect | Chọn từ cây danh mục phân cấp (tương tự Select nhưng dạng cây) |
Upload | Tải lên tệp — hỗ trợ kéo thả, xem trước ảnh |
VerificationCode | Ô nhập mã xác thực — gồm nhiều ô riêng biệt, mỗi ô một ký tự |
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) |
Dropdown | Menu xổ xuống khi bấm vào nút hoặc liên kết |
Menu | Thanh menu dọc hoặc ngang — phổ biến cho sidebar và header |
PageHeader | Đầu trang hiện tiêu đề trang, nút quay lại, breadcrumb |
Pagination | Thanh số trang khi có nhiều nội dung (Trang 1, 2, 3…) |
Steps | Thanh tiến trình gồm các bước — dùng cho wizard, quy trình đăng ký |
Nhóm 4 — 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 hoặc phản hồi hành độ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) |
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) |
Message | Thông báo ngắn bật lên ở góc màn hình (thành công, lỗi…) |
Modal | Hộp thoại bật lên giữa màn hình — dùng cho xác nhận, form |
Notification | Thông báo dạng popup thường nằm ở góc trên phải |
Popconfirm | Cửa sổ xác nhận nhỏ bật ra khi bấm nút nguy hiểm |
Progress | Thanh tiến trình cho biết công việc đang ở đâu |
Result | Trang kết quả hiện thành công, lỗi, 403, 404, 500 |
Skeleton | Đường gạch chờ tải — giúp giao diện không “nhảy” khi đang load |
Spin | Vòng xoay chờ tải (loading indicator) |
Nhóm 5 — 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 |
|---|---|
Divider | Đường kẻ phân cách ngang hoặc dọc |
Grid | Hệ thống lưới 24 cột — chia màn hình thành các vùng linh hoạt |
Layout | Cấu trúc trang gồm header, sider, content, footer |
Space | Khoảng cách tự động thêm khoảng trống giữa các phần tử |
Nhóm 6 — 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ó nhiều kiểu (primary, secondary, dashed, text, icon-only) và kích thước (large, default, small, mini) |
Icon | Biểu tượng — thư viện icon SVG tích hợp sẵn với hơn 1000 icon |
Link | Liên kết văn bản — siêu liên kết có thể tuỳ chỉnh màu, underline, icon kèm theo |
Typography | Kiểu chữ — tiêu đề, đoạn văn, trích dẫn, danh sách với các kích thước chuẩn |
Nhóm 7 — Cấu hình & Tiện ích (Config & Utilities)
Dùng để tuỳ chỉnh toàn bộ ứng dụng hoặc các công cụ hỗ trợ.
| Tên | Công dụng |
|---|---|
Affix | Thanh cố định — giữ một phần tử luôn hiển thị khi cuộn trang |
Anchor | Điều hướng neo — bấm vào để nhảy đến phần trong trang |
BackTop | Nút cuộn về đầu trang — hiện khi cuộn xuống đủ xa |
ConfigProvider | Cấu hình toàn cục — thay đổi màu chủ đạo, ngôn ngữ, locale |
ResizeBox | Vùng giao diện có thể kéo thay đổi kích thước bằng cách kéo cạnh |
Trigger | Thành phần nền tảng cho popover/dropdown — dùng làm base cho các component khác |
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 | 20 | Trình bày thông tin |
| Nhập liệu & Biểu mẫu | 19 | Thu thập dữ liệu từ người dùng |
| Điều hướng | 6 | Dẫn dắt người dùng di chuyển |
| Thông báo & Phản hồi | 10 | Thông báo trạng thái |
| Bố cục & Cấu trúc | 4 | Sắp xếp không gian |
| Hành động & Tương tác | 4 | Thao tác của người dùng |
| Cấu hình & Tiện ích | 6 | Tuỳ chỉnh toàn cục |
Tổng cộng: 72 thành phần — nổi bật với ecosystem hoàn chỉnh và hỗ trợ cả React lẫn Vue.
Tham khảo
- Trang chính thức: arco.design
- Danh sách thành phần: arco.design/en-US/docs/components
- Mã nguồn: github.com/arco-design/arco-design