Carousel

• Click arrows (variant arrows), dots (variants dots / cards), or thumbnails / circular swatches to jump to any slide.
• Drag / swipe works on mouse and touch on all transform-based variants. Disable with draggable={false}; tweak the commit distance with dragThreshold.
• Keyboard — left/right arrow keys when the carousel root has focus. Disable with keyboard={false}.

autoplay={ms} advances every N ms. The interval pauses automatically while the pointer is over the carousel and while the user is dragging. Disable hover-pause with pauseOnHover={false}.

const [i, setI] = useState(0);

<Carousel
  variant="arrows"
  index={i}
  onIndexChange={setI}
  slides={slides}
/>

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

• variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
• accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
• asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
• className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
• Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
• Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.