Button
Kích hoạt một hành động.
Component
Component
60 component, cùng dựng trên một bộ token. Dùng thử ngay tại đây, hoặc mở từng cái để xem ở chế độ sáng và tối, các prop và cách cài.
Hành động
5
ContextMenu
Mở menu tại pointer khi nhấn chuột phải, khi nhấn phím context trên bàn phím, hoặc khi nhấn giữ trên cảm ứng, với cùng các mục như DropdownMenu.
report.pdf
Nhấp chuột phải, nhấn giữ hoặc Shift+F10
DropdownMenu
Menu các hành động phía sau một button.
Toggle
Một button có trạng thái bật hoặc tắt được giữ lại.
ToggleGroup
Nhóm lựa chọn toggle kiểu single hoặc multiple, điều hướng được bằng bàn phím.
Form
18
Calendar
Lưới một tháng để chọn một ngày, inline.
October2026October 2026Su Mo Tu We Th Fr Sa Checkbox
Ô 16px bật hoặc tắt một lựa chọn, hoặc hiện bật một phần (indeterminate).
Bản tóm tắt hoạt động của nhóm bạn, mỗi Thứ Hai.
ColorPicker
Chọn màu từ vùng độ bão hòa và độ sáng 2D, một thanh sắc độ và một ô hex, trong Popover.
Combobox
Chọn một giá trị từ danh sách dài bằng cách gõ để lọc.
DatePicker
Trigger trông như một field, mở Calendar trong Popover, để chọn một ngày trong form.
Field
Một field của form.
Chúng tôi gửi biên lai đến địa chỉ này.
FilterBar
Một hàng bộ lọc phía trên bảng, danh sách hoặc chart.
24 orders
Input
Field văn bản một dòng.
Label
Tên nhìn thấy của một control trong form, có thể kèm ghi chú Required hoặc Optional, và button info tùy chọn kèm tooltip.
NumberInput
Field số đã định dạng, với các button bước tùy chọn.
OtpInput
Field mã một lần, hiện thành các slot bằng nhau.
RadioGroup
Một lựa chọn trong số vài phương án.
GóiTối đa 3 dự án.
Không giới hạn dự án và lịch sử phiên bản.
Pro, thêm thư viện dùng chung và vai trò.
Rating
Chọn hoặc hiện một điểm trên thang sao ngắn.
Select
Chọn một giá trị từ một danh sách.
Slider
Chọn một số, hoặc một khoảng hai số, bằng cách kéo thumb.
Khối lượngSwitch
Bật hoặc tắt một cài đặt ngay.
Nhận email khi có người nhắc đến bạn.
Textarea
Ô chữ nhiều dòng, cùng kiểu và trạng thái với Input.
Hiển thị trên thẻ dự án.
Tokenizer
Field gom vài giá trị ngắn thành các Token.
ada@example.comgrace@example.comNhấn Enter hoặc dấu phẩy sau mỗi địa chỉ.
Overlay
8
AlertDialog
Xác nhận cho hành động phá hủy.
Command
Tìm và chạy hành động inline hoặc trong dialog.
- Workspace
- Dự án mới⌘ N
- Tìm kiếm dự án
- Account
- Cài đặt
- Thanh toán
Dialog
Dialog modal với scrim và focus trap.
HoverCard
Nội dung xem trước chỉ đọc, mở khi hover hoặc focus bàn phím trên một link.
Popover
Một panel neo vào trigger, cho form ngắn, bộ lọc hoặc link chia sẻ.
Sheet
Một dialog trượt vào từ một cạnh.
Toast
Thông báo ngắn sau một hành động, ở góc màn hình.
Tooltip
Gợi ý chữ ngắn cho phần tử nó bọc, khi hover và khi focus bằng bàn phím.
Điều hướng
8
BottomNav
Thanh điều hướng mobile có tên, với các link, count tùy chọn và trạng thái đang chọn.
Không gian làm việc của bạn
Chọn một điểm đến bên dưới.
Breadcrumb
Đường dẫn tới trang hiện tại.
Link
Một đích có gạch chân, với dấu hiệu external tùy chọn.
Navbar
Điều hướng trang ở đầu trang.
Pagination
Chuyển giữa các trang.
Sidebar
Điều hướng app shell.
Không gian làm việc
Tổng quan
Nội dung của bạn xuất hiện ở đây.Stepper
Hiển thị tiến trình của một luồng theo thứ tự.
- 2Vận chuyển, bước hiện tại
- 3Thanh toán, chưa tới
- 4Xem xét, chưa tới
Tabs
Chuyển giữa các panel tại chỗ.
Tokens, thành phần và tài liệu cho dự án này.
Bố cục
5
Accordion
Các phần mở tại chỗ.
Có, trong vòng 14 ngày kể từ ngày mua.Card
Bề mặt có viền để nhóm nội dung liên quan.
Dự án
Chỉnh sửa lần cuối 2 giờ trước.
Token thiết kế và thành phần cho vibe coder.ResizablePanels
Các panel cạnh nhau hoặc chồng lên nhau, với một đường kẻ giữa hai panel để kéo hoặc di chuyển bằng phím mũi tên.
Hộp thư đến
Tin nhắn
ScrollArea
Nội dung cuộn được với thanh cuộn native mỏng theo theme.
Dự án 01
Vừa cập nhật
Dự án 02
Vừa cập nhật
Dự án 03
Vừa cập nhật
Dự án 04
Vừa cập nhật
Dự án 05
Vừa cập nhật
Dự án 06
Vừa cập nhật
Dự án 07
Vừa cập nhật
Dự án 08
Vừa cập nhật
Dự án 09
Vừa cập nhật
Dự án 10
Vừa cập nhật
Dự án 11
Vừa cập nhật
Dự án 12
Vừa cập nhật
Separator
Một đường 1px chia nội dung thành các nhóm.
Tài khoản
Thanh toán
Hiển thị dữ liệu
11
Avatar
Một người, team hoặc workspace hiện bằng ảnh, hoặc bằng một hay hai chữ cái đầu trên cặp hue khi không có ảnh.
ALBadge
Nhãn gọn cho status hoặc danh mục.
BetaChart
Mười một dạng chart định kiểu, với hình học responsive, inspect và một bảng dữ liệu truy cập được.
Hoạt động hàng tuần Dữ liệu minh họa gốc.
Hoạt động hàng tuần Hoạt động hàng tuần Lượt xem Người đọc Thành viên Thứ Hai 280 180 90 Thứ Ba 340 220 110 Thứ Tư 310 200 120 Thứ Năm 420 270 150 Thứ Sáu 390 260 170 Thứ Bảy 480 310 190 Chủ Nhật 520 340 220 Checklist
Danh sách việc có tiêu đề và thanh tiến độ, như các bước bắt đầu trên dashboard.
Thiết lập không gian làm việc của bạn
Hoàn thành các việc này để tận dụng tối đa dashboard.
Đã xong 1/4- Giúp nhóm của bạn nhận ra bạn.
- Cùng làm việc trên dashboard.
- Nhập sự kiện từ ứng dụng của bạn.
DataTrend
Khối chỉ số với một label, giá trị hiện tại và phần thay đổi.
Doanh thu$24,800Increased by 12.5%vs. previous monthImage
Hiện một ảnh trong khung giữ nguyên kích thước, với placeholder làm mờ để ảnh đầy đủ fade đè lên.
Kbd
Hiện một phím tắt hoặc một chuỗi phím.
⌘KMetadata
Các cặp nhãn và giá trị chỉ đọc trong một description list.
- Trạng thái
- Sẵn sàng
- Chủ sở hữu
- ALAda Lovelace
- Đã tạo
- 6 thg 10, 2026
- Thẻ
- Thiết kếTokens
SortableList
Danh sách người dùng sắp xếp lại bằng cách kéo tay nắm của một hàng hoặc bằng bàn phím.
- Doanh thu
- Lượt đăng ký
- Rời bỏ
- Lưu lượng
Table
Các hàng dữ liệu.
Hóa đơn cho năm 2026. Trạng thái Số tiền Thao tác INV-001 Đã thanh toán $250.00 INV-002 Đến hạn $1,200.00 Token
Pill đặt tên một token hoặc giá trị máy ngắn, trên cặp hue mềm (pink theo mặc định), với icon 12px tùy chọn, swatch màu hoặc avatar 16px, và button xóa tùy chọn (onRemove, removeLabel).
spacing-md
Trạng thái
5
Alert
Thông báo inline có tên, với action và cách bỏ qua tùy chọn.
Tải lên hoàn tất
Tệp của bạn đã sẵn sàng để chia sẻ.EmptyState
Giải thích một kết quả thành công nhưng trống, và hành động tiếp theo của nó.
Chưa có dự án
Tạo một dự án để giữ công việc của bạn cùng một chỗ.Progress
Thanh cho biết một việc đã xong bao nhiêu.
Đang tải report.pdfSkeleton
Một khối xám giữ chỗ cho nội dung trong lúc tải.
Spinner
Một cung quay cho việc không biết độ dài, kèm label giấu khỏi mắt.
Đang tải