Giới thiệu
Semi Design là bộ thư viện giao diện do ByteDance phát triển, cung cấp 70+ thành phần giao diện với điểm nhấn là bộ AI Components chuyên dụng. Đâ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 |
|---|---|
| 70+ thành phần | Bao gồm AI Components và Plus components |
| Phát triển bởi ByteDance | Đơn vị đứng sau TikTok và nền tảng AI |
| AI-First Design | Bộ AI Components chuyên dụng cho chatbot và ứng dụng thông minh |
| MCP Integration | Hỗ trợ tích hợp với Claude Code qua MCP server |
| TypeScript | Mã nguồn viết bằng TypeScript — dễ bảo trì |
| React | Chỉ hỗ trợ React |
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 |
Chart | Biểu đồ đa dạng — đường, cột, tròn, radar |
Collapse | Danh sách các mục có thể thu gọn/mở rộng từng mục |
Collapsible | Phần nội dung có thể thu gọn/mở rộng bằng một nút bấm |
Cropper | Công cụ cắt ảnh — phóng to/thu nhỏ, xoay, cắt vùng mong muốn |
Description | Bảng mô tả hiện danh sách thuộc tính và giá trị |
Dropdown | Menu xổ xuống khi bấm vào nút hoặc liên kết |
Empty | Trạng thái “không có dữ liệu” — hiện khi danh sách/bảng trống |
Highlight | Đánh dấu/cặp từ khoá quan trọng trong văn bản |
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 |
Modal | Hộp thoại bật lên giữa màn hình — dùng cho xác nhận, form |
OverflowList | Danh sách tự động ẩn các mục thừa khi không đủ không gian |
Popover | Cửa sổ nhỏ bật ra khi bấm hoặc di chuột vào một phần tử |
ScrollList | Danh sách cuộn vô tận — tải thêm dữ liệu khi cuộn xuống |
SideSheet | Bảng điều khiển trượt ra từ cạnh màn hình (trái/phải) |
Table | Bảng dữ liệu có sắp xếp, tìm kiếm, phân trang, lọc |
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ử |
UserGuide | Hướng dẫn sử dụng từng bước cho người dùng mới |
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 |
PinCode | Ô nhập mã xác thực — gồm nhiều ô riêng biệt, mỗi ô một ký tự |
Radio | Nút radio — chỉ chọn được một trong nhiều lựa chọn |
Rating | 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) |
TagInput | Ô nhập tag — người dùng nhập từ khoá rồi bấm Enter để tạo tag |
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 |
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 |
|---|---|
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 |
Breadcrumb | Đường dẫn phân cấp (ví dụ: Trang chủ > Sản phẩm > Áo thun) |
Navigation | Thanh điều hướng chính — menu ngang hoặc dọc cho website |
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ý |
Tabs | Thanh tab để chuyển đổi giữa nhiều nội dung khác nhau |
Tree | Cây thư mục hiện cấu trúc phân cấp có thể thu gọn |
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 |
|---|---|
Banner | Thanh thông báo ngang ở đầu trang — dùng cho thông báo hệ thống |
Feedback | Thu thập phản hồi từ người dùng — ví dụ: “Bạn thấy trang này thế nào?” |
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 |
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) |
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 5 — Bố cục & Cấu trúc (Layout)
Dùng khi bạn muốn sắp xếp, tổ chỉnh không gian trên màn hình.
| Tên | Công dụng |
|---|---|
Grid | Hệ thống lưới — chia màn hình thành các vùng linh hoạt |
Layout | Cấu trúc trang gồm header, sidebar, content, footer |
Resizable | Vùng giao diện có thể kéo thay đổi kích thước bằng cách kéo cạnh |
Space | Khoảng cách tự động thêm khoảng trống giữa các phần tử |
Nhóm 6 — Nền tảng & Hành động (Basic & Actions)
Những thành phần nền tảng được dùng xuyên suốt ứng dụng.
| Tên | Công dụng |
|---|---|
Button | Nút bấm có nhiều kiểu (primary, secondary, tertiary, warning, danger) và kích thước (large, default, small) |
Divider | Đường kẻ phân cách ngang hoặc dọc |
FloatButton | Nút nổi cố định ở góc màn hình — dùng cho hành động nhanh như “Cuộn lên đầu”, “Chat” |
Icon | Biểu tượng — thư viện icon tích hợp sẵn |
Tokens | Hệ thống biến thiết kế — màu sắc, spacing, typography, border-radius toàn bộ ứng dụng |
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 7 — Nội dung AI & Media (Plus)
Các thành phần nâng cao dành cho ứng dụng AI và nội dung phong phú.
| Tên | Công dụng |
|---|---|
AudioPlayer | Trình phát âm thanh — play, pause, progress bar |
Chat | Giao diện hội thoại AI — khung chat với message, input, action |
CodeHighlight | Đoạn code có tô màu cú pháp — hỗ trợ nhiều ngôn ngữ lập trình |
DragMove | Kéo thả để di chuyển/phóng to/thu nhỏ một phần tử |
HotKeys | Phím tắt — hiện tổ hợp phím khi di chuột qua một chức năng |
JsonViewer | Hiển thị dữ liệu JSON dạng cây có thể thu gọn/mở rộng |
LottieAnimation | Hiệu ứng animation từ file Lottie (After Effects) |
MarkdownRender | Hiển thị nội dung viết bằng Markdown thành HTML đã định dạng |
VideoPlayer | Trình phát video — hỗ trợ subtitle, fullscreen, quality |
Nhóm 8 — AI Components (AI Chat)
Các thành phần được thiết kế riêng cho ứng dụng chatbot và AI.
| Tên | Công dụng |
|---|---|
AIChatDialogue | Hộp thoại chat AI — hiện tin nhắn, thời gian, avatar, actions |
AIChatInput | Ô nhập chat AI — có thể nhập văn bản, đính kèm file, chọn chế độ |
Sidebar | Thanh bên AI — hiện lịch sử chat, cài đặt, danh sách cuộc hội thoại |
Nhóm 9 — Cấu hình & Tiện ích (Config & Utilities)
Dùng để tuỳ chỉnh toàn bộ ứng dụng.
| Tên | Công dụng |
|---|---|
ConfigProvider | Cấu hình toàn cục — thay đổi màu chủ đạo, ngôn ngữ, locale |
LocaleProvider | Hỗ trợ đa ngôn ngữ — chuyển đổi ngôn ngữ cho toàn bộ ứng dụng |
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 | 25 | Trình bày thông tin |
| Nhập liệu & Biểu mẫu | 18 | Thu thập dữ liệu từ người dùng |
| Điều hướng | 8 | Dẫn dắt người dùng di chuyển |
| Thông báo & Phản hồi | 8 | Thông báo trạng thái |
| Bố cục & Cấu trúc | 4 | Sắp xếp không gian |
| Nền tảng & Hành động | 6 | Thành phần cơ bản, nút bấm |
| Nội dung AI & Media | 9 | Ứng dụng AI, nội dung phong phú |
| AI Components | 3 | Chatbot, AI chat |
| Cấu hình & Tiện ích | 2 | Tuỳ chỉnh toàn cục |
Tổng cộng: 70+ thành phần — nổi bật với AI Components và Plus components cho ứng dụng thông minh.
Tham khảo
- Trang chính thức: semi.design
- Danh sách thành phần: semi.design/en-US/basic/button
- Mã nguồn: github.com/DouyinFE/semi-design
- AI Agent MCP: semi.design/en-US/start/introduction