ui · 6 variants · 1 categories

Tour

Multi-step product tour — `<Tour>` orchestrator with spotlight cutout, automatic positioning, keyboard nav and 5 card variants. Plus `<TourCard>` for standalone callouts and `<TourSpotlight>` for a pulsing ring. Target any element via selector, ref or callback.

npx "@rueda.dev/gems-diamond" add tour

§01

Tour

6 variants

Step 1 of 4

Create your first project

Click + to open the project creator.

step

Step 2 of 4

Import existing data

Bring projects, files, and members from your old tools.

import

Quick tip

Press ⌘K anywhere to open the command palette.

dark-tip

Step 4 of 4

You're all set!

Welcome aboard. Let's get you building.

accent-final

NEWRealtime collaborationSee cursors instantly.

new-feature

Workspace

+ New project

Search · ⌘K

spotlight

Usage Guide

How to wire up this component in your app — props, callbacks, customization, and the conventions Diamond shares across the library.

Universal patterns

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.