# Feature Sections

> 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.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/feature-sections
- Install: `npx shadcn@latest add @geturui-pro/feature-sections`
- Dependencies: motion, lucide-react

## Variants

### Hotspots

Product shot with numbered, pulsing hotspots; each opens an anchored detail card you can step through with arrow keys.

Install: `npx shadcn@latest add @geturui-pro/feature-sections-hotspots`

```tsx
import { FeatureHotspots } from "@/components/blocks/feature-sections/hotspots";

export default function Features() {
  return (
    <FeatureHotspots
      defaultOpen="policy"
      hotspots={[
        { id: "match", x: 16, y: 30, title: "Receipts match themselves", body: "Forward an email and it pairs with the swipe." },
        { id: "policy", x: 63, y: 22, title: "Policy on every swipe", body: "Limits run at the moment of purchase.", stat: "0 surprises" },
      ]}
    />
  );
}
```

| 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

Rows that swap image and copy sides; each slides in from its own side on scroll while its built-in visual animates.

Install: `npx shadcn@latest add @geturui-pro/feature-sections-alternating-rows`

```tsx
import { FeatureAlternatingRows } from "@/components/blocks/feature-sections/alternating-rows";

export default function Features() {
  return (
    <FeatureAlternatingRows
      rows={[
        { eyebrow: "Inbox", title: "One calm queue", body: "Every channel in one list.", visual: "inbox" },
        { eyebrow: "Reports", title: "See what resolves tickets", body: "First-reply time and reopen rate.", visual: "chart" },
      ]}
    />
  );
}
```

| 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

A 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.

Install: `npx shadcn@latest add @geturui-pro/feature-sections-synced-list`

```tsx
import { FeatureSyncedList } from "@/components/blocks/feature-sections/synced-list";

export default function Features() {
  return <FeatureSyncedList heading="Notes that keep up with the conversation" defaultValue="collab" />;
}
```

| 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

Product tour with tabs whose progress bars fill on a timer; it autoplays through four app views and pauses on hover or focus.

Install: `npx shadcn@latest add @geturui-pro/feature-sections-tabbed-tour`

```tsx
import { FeatureTabbedTour } from "@/components/blocks/feature-sections/tabbed-tour";

export default function Tour() {
  return <FeatureTabbedTour interval={6000} />;
}
```

| 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. |

## 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.