Four feature sections — pulsing hotspots over a product shot, alternating rows that slide in from their side, a list that drives an animated panel and a tabbed tour with timed progress bars.
Hotspots
hotspots.tsxProduct shot with numbered, pulsing hotspots; each opens an anchored detail card you can step through with arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Label above the heading. |
heading | string | — | Section h2. |
subcopy | string | — | Line under the heading. |
hotspots | FeatureHotspot[] | — | { id, x, y, title, body, stat? } with x and y as 0–100 percentages over the shot. |
defaultOpen | string | null | "policy" | Hotspot open on mount; null starts closed. |
className | string | — | Classes for the section. |
Alternating rows
alternating-rows.tsxRows that swap image and copy sides; each slides in from its own side on scroll while its built-in visual animates.
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | — | Section h2. |
subcopy | string | — | Line under the heading. |
rows | AlternatingRow[] | — | { eyebrow, title, body, bullets?, visual: "inbox" | "chart" | "toggles" | "timeline", link? }. |
className | string | — | Classes for the section. |
Synced list
synced-list.tsxA vertical feature list drives a large panel: the active item expands, a volt rail glides to it and the panel visual crossfades in the direction you moved.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Label above the heading. |
heading | string | — | Section h2. |
features | SyncedFeature[] | — | { id, title, body, visual: "search" | "collab" | "links" | "offline" }. |
defaultValue | string | — | Id selected on mount; defaults to the first. |
className | string | — | Classes for the section. |
Tabbed tour
tabbed-tour.tsxProduct tour with tabs whose progress bars fill on a timer; it autoplays through four app views and pauses on hover or focus.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Label above the heading. |
heading | string | — | Section h2. |
steps | TourStep[] | — | { id, label, title, body, view: "overview" | "funnels" | "retention" | "alerts" }. |
interval | number | 6000 | Milliseconds per step while autoplaying. |
autoplay | boolean | true | Advance on a timer. Always off under reduced motion. |
className | string | — | Classes for the section. |
Install the whole set
Installs every feature sections variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Hotspots, list items and tabs are real buttons with aria-expanded or aria-selected; arrow keys move between them and Escape closes hotspot details.
- The synced list and tour use tablist/tab/tabpanel roles with roving tabindex; the tour pauses on hover and focus and has a Stop button.
- Pulses, autoplay and slide-ins are disabled under reduced motion; content crossfades instead.