Tài liệu dev

Ma trận Button đầy đủ theo appearance, màu sắc, kích thước và cách kết hợp text/icon.

Contract Input compact với bốn kích thước, trạng thái, icon và kiểm tra alignment toolbar.

Thành phần phân trang cao cấp đồng bộ kích thước ControlSize (xs, sm, md, lg) với Input và Button, hỗ trợ nhảy trang qua ellipsis.

Thành phần Toggle Switch @ark-ui/react/switch và Tailwind CSS v4 đồng bộ 4 kích thước với Button và Input.

Thành phần Checkbox @ark-ui/react/checkbox và Tailwind CSS v4 đồng bộ 4 kích thước với Button và Input.

Thành phần chọn một mục @ark-ui/react/radio-group và Tailwind CSS v4 đồng bộ 4 kích thước với Button và Input.

Thành phần thu gọn/mở rộng nội dung mượt mà @ark-ui/react/collapsible và Tailwind CSS v4 với animation keyframes mượt mà.

Thành phần Accordion @ark-ui/react/accordion và Tailwind CSS v4 với 6 variants, animation mượt mà, hỗ trợ Shorthand và Compound API.

Thành phần nhập mã PIN / OTP @ark-ui/react/pin-input và Tailwind CSS v4 đồng bộ 4 kích thước với Button và Input.

Thành phần nhóm trường nhập liệu @ark-ui/react/fieldset và Tailwind CSS v4 với 5 variants, 4 sizes và cascade disabled.

Thành phần form field @ark-ui/react/field và Tailwind CSS v4 hỗ trợ Compound & Shorthand APIs, WAI-ARIA, 4 kích thước và tích hợp Ark UI.

Ma trận Badge với 8 màu Tailwind, đầy đủ appearance, kích thước, shape và kiểu nội dung.

Demo renderer controlled, group/repeater lồng nhau, Field Builder và RHF adapter.

Demo RemovableFieldRow với children tự do, leading content, remove action và controlled state.

Demo RepeatableList với danh sách controlled, thêm item, empty state và kéo-thả reorder.

Thành phần trạng thái rỗng chuẩn hóa: 4 biến thể, 3 kích cỡ, vector presets và hỗ trợ cả 2 API.

Demo ArkDatePicker và ArkDateRangePicker dùng trực tiếp @ark-ui/react/date-picker.

Demo ArkDateInput theo phân đoạn ngày giờ dùng @ark-ui/react/date-input và Tailwind CSS v4.

Demo ArkTreeView với compound & declarative API, checkbox tri-state, rename F2 và lọc real-time.

Demo ArkTabs kết hợp @ark-ui/react/tabs và Tailwind CSS v4 với 5 biến thể, animated indicator, vertical orientation và shorthand API.

Demo Ark Dialog kết hợp @ark-ui/react/dialog, portal và Tailwind CSS v4 với đầy đủ biến thể kích thước, vị trí và alert dialog.

Demo Ark Drawer kết hợp @ark-ui/react/drawer và Tailwind CSS v4 với cử chỉ kéo vuốt 60fps, snap points, 4 hướng mở và modal/non-modal.

Demo Ark Toast kết hợp @ark-ui/react/toast và Tailwind CSS v4 với hàng đợi thông minh, promise, nút hành động và đa biến thể.

Demo Ark Tooltip kết hợp @ark-ui/react/tooltip và Tailwind CSS v4 với mũi tên đồng bộ, 8 vị trí, rich content và đa biến thể.

Demo Ark Menu kết hợp @ark-ui/react/menu và Tailwind CSS v4 với submenus đa cấp, context menu chuột phải, checkbox, radio và 12 nhóm ví dụ.

Bộ chọn màu nâng cao kết hợp @ark-ui/react/color-picker và Tailwind CSS v4, phân tách ô màu và HEX, nút Clear, hỗ trợ Slider-only, popover có arrow và RHF field.

Danh sách icon nội bộ của ChillCMS, kèm tìm kiếm và copy nhanh tên/import/JSX.

Demo ArkSlider dựa trên @ark-ui/react/slider với single, range, vertical, markers và compound parts.

Demo ArkNumberInput dựa trên @ark-ui/react/number-input với formatOptions, scrubber, stepper linh hoạt và form field.

Thành phần chọn góc quay dạng vòng tròn kết hợp @ark-ui/react/angle-slider và Tailwind CSS v4.

Thành phần chỉnh sửa nội dung tại chỗ kết hợp @ark-ui/react/editable và Tailwind CSS v4.

Thành phần sao chép văn bản kết hợp @ark-ui/react/clipboard và Tailwind CSS v4.

Thành phần đánh giá số sao kết hợp @ark-ui/react/rating-group và Tailwind CSS v4.

Demo ArkSegmentGroup dựa trên @ark-ui/react/segment-group và Tailwind CSS v4.

Thành phần nhóm nút bật/tắt kết hợp @ark-ui/react/toggle-group và Tailwind CSS v4.

Demo ArkFloatingPanel dựa trên @ark-ui/react/floating-panel và Tailwind CSS v4.

Thành phần mã phản hồi nhanh kết hợp @ark-ui/react/qr-code và Tailwind CSS v4.

Thành phần Stepper WAI-ARIA hoàn chỉnh kết hợp @ark-ui/react/steps và Tailwind CSS v4.

Thành phần đồng hồ đếm giờ kết hợp @ark-ui/react/timer và Tailwind CSS v4 với stopwatch, countdown, interval, events và RootProvider.

Demo TimecodeInput với controlled state, giới hạn thời lượng, bàn phím và paste timecode.

Demo ArkSignaturePad dựa trên @ark-ui/react/signature-pad với SVG paths, xuất ảnh, form và controlled state.

Demo Format Byte, Number, RelativeTime và Time trực tiếp từ @ark-ui/react kết hợp LocaleProvider.

Thành phần hướng dẫn từng bước trực quan kết hợp @ark-ui/react/tour và Tailwind CSS v4.

Demo Ark Marquee dùng trực tiếp @ark-ui/react/marquee với auto-fill, pause, tốc độ, loop và hướng dọc.

Demo Carousel dùng trực tiếp @ark-ui/react với autoplay, mouse drag và hướng dọc.

Demo Lightbox trình chiếu ảnh với zoom, swipe, thumbnails và slideshow.

Demo Photo Album hỗ trợ SSR Zero-CLS, bố cục Rows/Columns/Masonry và tích hợp Lightbox.

Thanh tiến độ kết hợp @ark-ui/react/progress, Tailwind v4 với size chuẩn hóa, variants, label, value và indeterminate.

Demo Progress Circular với controlled state, indeterminate, min/max và RootProvider.

Thanh điều hướng cao cấp kết hợp @ark-ui/react/navigation-menu, Tailwind v4 và Shared Animated Viewport.

Thành phần Select với @ark-ui/react/select và Tailwind CSS v4, đồng bộ kích thước chuẩn với Input & Button.

Thành phần thẻ xem trước Hover Card với @ark-ui/react/hover-card và Tailwind CSS v4, hỗ trợ nhiều kích thước và multiple triggers.

Thành phần Popover tương tác cao với @ark-ui/react/popover và Tailwind CSS v4, hỗ trợ Custom Anchor, Modal focus trap, 5 variants và Compound API.

Thành phần Tags Input với @ark-ui/react/tags-input và Tailwind CSS v4, đồng bộ kích thước với Input & Button, 3 biến thể và Compound API.

Thành phần bộ sưu tập danh sách & bộ chọn @ark-ui/react/collection và Tailwind CSS v4, đồng bộ kích thước với Input & Button, hỗ trợ 3 layout và Remix Hook Form.

Thành phần Combobox với @ark-ui/react/combobox và Tailwind CSS v4, đồng bộ kích thước chuẩn với Input & Button, hỗ trợ Shorthand & Compound API.

Thành phần hộp chọn tìm kiếm dữ liệu bất đồng bộ từ xa với debounce, cuộn vô tận nạp thêm trang, tags mode và fallbackOption.

Thành phần chọn dạng nút bấm trigger kết hợp Popover tìm kiếm chuyên dụng bên trong, hỗ trợ tìm kiếm không dấu tiếng Việt và keywords.