Dice UI

Dice UI is a collection of accessible, composable components designed to extend shadcn/ui. It is built using React, TypeScript, and Tailwind CSS.

Key characteristics include:

• Composable Design: Build complex interfaces by combining simple, focused components.
• shadcn/ui Integration: Uses the same design principles, styling approach, and registry distribution as shadcn/ui.
• Copy-paste Ready: Follows the same installation experience as shadcn/ui components with no complex setup or configuration required.
• Accessibility: Every component follows WCAG guidelines, includes proper ARIA attributes, and supports keyboard navigation out of the box.
• Customizability: Built with Tailwind CSS to easily match your existing design system.

The Data Grid is a high-performance, spreadsheet-like component designed for large datasets. Key capabilities include:

• Performance: Virtualized rows and columns (supports 10,000+ rows).
• Cell Editing: In-place editing with 9 different cell variants.
• Clipboard: Full support for Copy/Cut/Paste, including data from Excel/Google Sheets.
• History: Undo/Redo support for cell updates, row additions, and deletions.
• Data Management: Advanced filtering (multiple operators), multi-column sorting (drag-and-drop), and row management (add/delete).
• Column Controls: Resizing, pinning (left/right), hiding, and reordering.
• Advanced UX: Smart Paste (auto-expands grid), Auto-Fill (type to edit), RTL support, and Read-Only mode.

You can prevent users from proceeding to the next step if the current step's data is invalid by using the onValidate prop on the Stepper component.

• StepperNext respects validation rules and will not advance if onValidate returns false.
• StepperPrev skips validation when navigating backwards, allowing users to correct previous steps freely.

The TimePicker handles time formatting based on the user's locale, but you can control this behavior using the locale prop:

• Automatic detection: The display format (12-hour vs 24-hour) is automatically detected from the user's locale settings.
• Value format: Regardless of the display format, the time value is always stored in a consistent 24-hour format ("HH:mm" or "HH:mm:ss").
• Manual override: Use the locale prop to explicitly set a specific locale (e.g., locale="en-US" for 12-hour format or locale="en-GB" for 24-hour format).
• 12-hour shortcuts: In 12-hour mode, users can use A/P or 1/2 keys to quickly toggle AM/PM.

Each component (such as ResponsiveDialogContent and ResponsiveDialogFooter) exposes a data-variant attribute. You can use this attribute in your CSS or Tailwind classes to apply specific styles depending on whether the component is currently rendered as a dialog (desktop) or a drawer (mobile).

<ResponsiveDialogContent className="data-[variant=drawer]:pb-8 data-[variant=dialog]:max-w-md">
  {/* content */}
</ResponsiveDialogContent>

<ResponsiveDialogFooter className="data-[variant=drawer]:flex-col data-[variant=dialog]:flex-row">
  {/* buttons */}
</ResponsiveDialogFooter>

The Timeline root component accepts props to control the layout direction and visual pattern:

• orientation: Set to "vertical" (default) or "horizontal".
• variant: Set to "default" or "alternate". The alternate variant places content on both sides of the timeline (left/right for vertical, above/below for horizontal).
• dir: Set to "rtl" to enable right-to-left layout support.

<Timeline variant="alternate" orientation="horizontal">
  {/* Content alternates above and below */}
</Timeline>

The AvatarGroup component provides several ways to manage large lists and layout orientation:

• Truncation: Use the max prop to automatically truncate long lists and show overflow indicators.
• Custom Overflow: Use the renderOverflow prop to provide a custom component for the overflow indicator.
• RTL Support: Supports right-to-left layouts and vertical RTL stacking.
• Orientation: Can be configured via the data-orientation attribute.

Supported Color Formats

The component supports:

• HEX (e.g., #3b82f6)
• RGB (e.g., rgb(59, 130, 246))
• HSL (e.g., hsl(217, 91%, 60%))
• HSB (e.g., hsb(217, 76%, 96%))

All formats support the alpha channel unless the withoutAlpha prop is used.

EyeDropper API Support

The ColorPickerEyeDropper component only renders in browsers that support the native EyeDropper API:

• Chrome/Edge: Supported (v95+)
• Firefox: Not supported
• Safari: Not supported

In unsupported browsers, the component gracefully hides the eye dropper button.