Thư viện
Components
49 primitive Tầng 1 — shadcn/ui kiểu new-york, chỉnh lại để màu đi qua một token vai trò của Comitor và theo bảng tương phản đang dùng, bảng mặc định hay data-contrast="high". API vẫn giữ dáng shadcn: variant bằng cva, asChild ở chỗ hợp lý, và móc data-slot để nhắm vào từng phần.
Mọi thứ dưới đây import từ @comitor/ui, trừ khi thẻ ghi một entry khác.
2.1.0 thêm 18 component Tầng 1 nữa, chuyển từ Dice UI và export từ cùng entry: Kanban, Stepper, Timeline, TimePicker, TagsInput, Mention, ActionBar, PhoneInput, MaskInput, Rating, CircularProgress, Banner, ResponsiveDialog, Tour, KeyValue, Cropper, ScrollSpy và BadgeOverflow. Mỗi cái là một tổ hợp nhiều phần chứ không phải một primitive, nên site này đặt chúng ở Composites — bắt đầu từ Kanban, PhoneInput hoặc ResponsiveDialog — và 49 component ở trên không tính chúng.
Hành động
Control thực hiện một việc, cái nào cũng nhận focus và dùng được bằng bàn phím. Kbd là ngoại lệ: nó chỉ hiện các phím tạo nên một phím tắt.
Kích hoạt một hành động hoặc điều hướng. Bảy variant, bảy cỡ, thêm prop loading và icon.
Ghép button, input và select thành một control liền khối, ngang hoặc dọc.
Button hai trạng thái cho thanh công cụ. Variant default và outline, ba cỡ.
Bộ toggle liền đoạn; variant và size truyền xuống mọi mục qua context.
Hiện phím bàn phím, và KbdGroup cho cả một tổ hợp phím tắt.
Nhập liệu
Control của form. Viền lúc nghỉ, hover, focus và lỗi đều đi qua token vai trò, nên vẫn đọc rõ ở cả hai bảng tương phản.
Ô nhập văn bản một dòng. Slot tuỳ chọn cho nhãn, gợi ý, lỗi và addon nội dòng.
Bọc một input, textarea hay button với addon ở đầu và cuối.
Ô nhập chia đoạn cho mã dùng một lần và luồng 2FA.
Ô nhập văn bản nhiều dòng, tự cao theo nội dung.
Nhãn có tên truy cập, gắn với một control của form.
Nhãn, control, mô tả và lỗi trong một nhóm. Dọc, ngang hoặc theo màn hình.
Lựa chọn có/không, nhãn và mô tả tuỳ chọn, cùng trạng thái indeterminate thật.
Chọn một tuỳ chọn duy nhất trong một bộ loại trừ nhau.
Bật một thiết lập ngay lập tức. Hai cỡ, nhãn và mô tả tuỳ chọn.
Kéo để chọn một giá trị hoặc một khoảng. Một hay nhiều núm, ngang hoặc dọc.
Dropdown để chọn một giá trị. Hai cỡ trigger; giá trị rỗng cần một sentinel.
Lịch react-day-picker trần. DatePicker thêm ô nhập chữ và preset.
Hiển thị
Bề mặt và trạng thái. Mọi variant theo tông đều nói qua bậc -ink, nhưng không phải lúc nào cũng cùng cách: Badge đặt chữ ink trên tint của chính màu nó, còn Alert giữ nền card trơn phía sau vì bậc fill đặc kéo chữ xuống 1,59:1.
Container với bốn variant và bốn bậc padding. CardHeader có slot actions.
Nhãn theo tông cho trạng thái, số đếm hoặc phân loại. Hai cỡ.
Ảnh người dùng, khi thiếu ảnh thì lùi về chữ viết tắt.
Hàng với header, sọc và footer. Sắp xếp và chọn hàng nằm ở DataTable.
Đường chia giữa các nhóm nội dung.
Giữ nội dung theo một tỉ lệ rộng–cao cố định.
Placeholder trung tính, màu muted, hiện trong lúc nội dung tải — không bao giờ dùng tint thương hiệu.
Chỉ báo đang tải không xác định, có role status.
Thanh tiến độ xác định, bốn tông; tông warning thêm sọc cảnh báo, không chỉ đổi màu.
Trạng thái trống cho danh sách và kết quả rỗng.
Hàng danh sách linh hoạt với media, nội dung và hành động.
Khối nhắc cho thông điệp quan trọng theo ngữ cảnh. Default, warning và destructive.
Lớp phủ
Mọi thứ nổi trên trang, từ một tooltip một dòng tới một modal đầy đủ.
Modal bốn cỡ, với DialogBody cuộn được giữa header và footer.
Modal chen ngang để xác nhận một hành động quan trọng, không đóng được bằng cú bấm bên ngoài.
Panel trượt vào từ bất kỳ cạnh nào của màn hình.
Panel kéo để đóng, có tay nắm và quán tính, cho màn hình cảm ứng.
Panel nổi neo vào một trigger, bên trong bố cục tự do.
Bản xem trước giàu nội dung hiện khi hover — chỉ là chi tiết phụ, không bao giờ là đường duy nhất tới một hành động.
Nhãn ngắn hiện khi hover hoặc focus. Tự mang provider riêng.
Menu hành động mở từ một button, có variant mục destructive và inset.
Menu hành động bằng chuột phải cho một phần tử.
Thanh menu kiểu desktop với menu lồng nhau, cho màn hình soạn thảo.
Danh sách lệnh lọc được. CommandDialog bọc nó thành bảng lệnh Cmd/Ctrl+K.
Điều hướng
Đi giữa các màn hình. Tabs giữ state trên một trang; bộ tab mà mỗi mục là một route thật thì là RouteTabs.
Tab có state, hai variant, dùng chung tabsListVariants và tabsTriggerVariants với RouteTabs.
Đường dẫn phân cấp cho biết vị trí hiện tại. Render từ Server Component được.
Control chuyển trang bằng link. Bản tự đếm số trang là TablePagination.
Điều hướng cấp cao nhất với panel mở rộng, cho landing page và các trang công khai khác.
Các phần xếp dọc, mở ra và thu lại.
Mở và đóng một vùng nội dung. Cố ý không có style.
Bố cục
Container định hình một vùng chứ không lấp đầy nó.
Entry khác
Tài liệu đặt cạnh các primitive nhưng không thuộc Tầng 1 ở entry chính — mỗi thẻ ghi rõ import từ đâu.
Biểu đồ đường, vùng và cột của Comitor trên lớp Recharts của shadcn.
@comitor/ui/chart
Lớp nối react-hook-form. FormField của nó là wrapper của Controller, không phải composite.
@comitor/ui/form
Toast xếp chồng với icon trạng thái của Comitor. SonnerToaster ở entry shell là bản dùng next-themes.
@comitor/ui
Sidebar của app. Cố ý không có sidebar Tầng 1 — cái này đi cùng shell.
@comitor/ui/shell
Hợp đồng dữ liệu NavGroup / NavItem và các helper điều khiển điều hướng của shell.
@comitor/ui/shell
Ngoài các primitive
Gói có thêm hai tầng nằm trên tầng này. Composite Tầng 2 là các mẫu lặp lại trong mọi app Comitor, ráp từ các primitive ở trên và export từ cùng entry @comitor/ui. Tầng 3 là khung app, cần Next và next-themes nên nằm sau @comitor/ui/shell.