Component
48 primitive, mỗi cái cài lẻ được bằng một lệnh. Mọi component chỉ đọc semantic token — đổi preset là đổi toàn bộ giao diện.
Form (12)
- ButtonButton and link-button. Sizes read the density tokens, so the same code renders compact in ERP and roomy in e-learning.
- CheckboxHộp kiểm dựa trên Radix Checkbox với trạng thái đã chọn, chưa chọn và không xác định.
- ComboboxÔ chọn có tìm kiếm (Popover + Command + Button), generic theo kiểu giá trị, hỗ trợ xoá lựa chọn và tuỳ chọn bị vô hiệu hoá.
- FormBộ khung biểu mẫu kết hợp react-hook-form và zod, cung cấp Form/FormField/FormItem/FormLabel/FormControl/FormDescription/FormMessage và hook useFormField với liên kết ARIA tự động.
- InputTrường nhập liệu văn bản; chiều cao và khoảng đệm đọc từ token mật độ, hỗ trợ trạng thái lỗi qua aria-invalid.
- Input OTPTrường nhập mã OTP nhiều ô dựa trên thư viện input-otp, kích thước ô đọc từ token mật độ.
- LabelNhãn cho trường biểu mẫu dựa trên Radix Label, tự động làm mờ khi điều khiển liên kết bị vô hiệu hoá.
- Radio GroupNhóm nút chọn một dựa trên Radix Radio Group.
- SelectHộp chọn dựa trên Radix Select, hỗ trợ hai kích thước và đọc token mật độ cho chiều cao trigger.
- SliderThanh trượt chọn giá trị dựa trên Radix Slider, hỗ trợ nhiều điểm kéo.
- SwitchCông tắc bật/tắt dựa trên Radix Switch.
- TextareaVùng nhập văn bản nhiều dòng, tự co giãn theo nội dung và đọc token mật độ cho chiều cao tối thiểu.
Overlay (10)
- Alert DialogHộp thoại xác nhận bắt buộc phản hồi (Radix Alert Dialog), nút hành động dùng lại buttonVariants.
- CommandBảng lệnh tìm kiếm nhanh (bọc cmdk); CommandDialog kết hợp dialog để dùng như command palette.
- Context MenuMenu ngữ cảnh khi chuột phải (item, checkbox, radio, submenu) từ Radix Context Menu; chiều cao mục đọc token mật độ.
- DialogHộp thoại modal dùng Radix Dialog, với overlay và nội dung theo thang z-index modal của reno.
- DrawerBảng kéo lên từ dưới cho thao tác trên di động, bọc thư viện vaul.
- Dropdown MenuMenu thả xuống đầy đủ (item, checkbox, radio, submenu) từ Radix Dropdown Menu; chiều cao mục đọc token mật độ.
- Hover CardThẻ xem trước hiện khi di chuột vào trigger (Radix Hover Card).
- PopoverLớp phủ nổi neo theo trigger (Radix Popover) cho nội dung tương tác ngắn.
- SheetBảng trượt vào từ cạnh màn hình (Radix Dialog), hỗ trợ bốn hướng top/right/bottom/left.
- TooltipChú giải nổi khi di chuột/focus vào trigger (Radix Tooltip).
Layout (8)
- AccordionDanh sách mục có thể mở/thu gọn dựa trên Radix, kèm biểu tượng mũi tên xoay.
- Aspect RatioGiữ tỉ lệ khung hình cố định cho nội dung con, dựa trên Radix Aspect Ratio.
- CardBề mặt nội dung nổi có tiêu đề, hành động và chân trang; dùng bg-card/text-card-foreground.
- CollapsibleVùng nội dung có thể ẩn/hiện đơn giản, không có phần trang trí riêng.
- ResizableBố cục nhiều khung có thể kéo giãn, dựa trên react-resizable-panels v4 (Group/Panel/Separator).
- Scroll AreaVùng cuộn có thanh cuộn tuỳ biến, dựa trên Radix Scroll Area.
- SeparatorĐường phân cách ngang hoặc dọc, dùng bg-border.
- TabsĐiều hướng dạng thẻ tab dựa trên Radix; chiều cao TabsList đọc density-control-height.
Data (8)
- AvatarẢnh đại diện với ảnh, chữ viết tắt dự phòng và ba cỡ đọc token density, đồng bộ chiều cao với Button.
- CalendarLịch chọn ngày dựa trên react-day-picker v10, mặc định locale tiếng Việt (date-fns/locale/vi). Nút điều hướng tái sử dụng buttonVariants.
- ChartBiểu đồ cột/đường/vùng trên recharts. API khai báo (data + series), không có type recharts trong props. Màu series đọc --chart-1..5 nên đổi theo preset và light/dark. Chỉ cài khi cần — dự án không dùng biểu đồ không dính recharts.
- DataGridGrid ảo hoá cho admin/ERP: 10k+ dòng, server-side pagination/sort/filter, ghim/resize/ẩn cột, chọn dòng xuyên trang, empty/loading/error có sẵn. Chỉ cài khi cần — dự án nhẹ dùng @reno/table.
- DataGrid ToolbarThanh công cụ cho DataGrid: tìm kiếm có debounce, chip bộ lọc đang bật, ẩn/hiện cột, xuất dữ liệu. Item riêng để màn hình không cần thì không phải cài.
- Date PickerDatePicker (một ngày) và DateRangePicker (khoảng ngày), ghép từ Popover + Calendar + Button, định dạng và locale mặc định tiếng Việt.
- PaginationPhân trang không phụ thuộc next/link, tái sử dụng buttonVariants. Nhãn Trước/Sau và mô tả trợ năng có tiếng Việt mặc định, ghi đè được qua props.
- TableBảng dữ liệu tĩnh cho danh sách CMS/e-learning. Không dùng TanStack — tính năng lưới nặng thuộc @reno/data-grid; chiều cao dòng và đệm ô đọc token density.
Feedback (6)
- AlertThông báo nổi bật với các biến thể default/destructive/success/warning/info dùng token trạng thái.
- BadgeNhãn nhỏ với các biến thể default/secondary/destructive/outline/success/warning/info, hỗ trợ asChild.
- ProgressThanh tiến trình dựa trên Radix Progress, phần chỉ báo dùng bg-primary.
- SkeletonKhối giữ chỗ khi đang tải, dùng bg-accent kết hợp hiệu ứng animate-pulse.
- SonnerBọc Toaster của sonner, không phụ thuộc next-themes; màu sắc ánh xạ qua CSS variable API của sonner theo token reno.
- SpinnerChỉ báo đang tải nhỏ gọn, role=status, kích thước đọc density token, màu theo currentColor.
Nav (4)
- BreadcrumbĐiều hướng breadcrumb không phụ thuộc router. BreadcrumbLink nhận asChild để gắn next/link hoặc thẻ <a> tuỳ dự án.
- MenubarThanh menu kiểu ứng dụng desktop, đầy đủ menu con, checkbox và radio item của Radix. Lớp nổi dùng z-index token --z-dropdown.
- Navigation MenuMenu điều hướng cấp cao với viewport và indicator của Radix. Lớp nổi dùng z-index token --z-dropdown.
- SidebarThanh điều hướng ứng dụng đầy đủ tính năng: thu/phóng, chế độ icon, sheet trên mobile, tooltip khi thu gọn, lưu trạng thái qua cookie. Menu item dùng asChild thay vì gắn cứng router.