Feature Tabs
A feature showcase with auto-advancing vertical tabs and a progress line beside a drawn product view that swaps per tab, pausing on hover, focus or a pause control.
Preview
Product tour
A notebook built for research teams
Four things Pebble does well. The tour moves on by itself; hover to stay.
Pebble notes · Week 44
Interview themes
People keep notes in three different places
BILinkQuote
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FeatureTab[] | — | Tabs: { id, title, description?, icon?, preview }; preview is the drawn product view. |
| title | ReactNode | — | Section heading; also names the tablist. |
| description | ReactNode | — | Line under the heading. |
| eyebrow | ReactNode | — | Label above the heading. |
| defaultValue | string | first item | Active tab at first. |
| onValueChange | (id) => void | — | Called when the tab changes, by the user or the timer. |
| autoPlay | boolean | true | Advance on a timer; pauses on hover, focus and off screen. Never runs under reduced motion. |
| interval | number | 6000 | Milliseconds each tab stays before advancing. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.