Feature Section
A feature block with a vertical tab switcher whose drawn product visuals cross-transition on a lit stage, plus a three-up card grid with faded visual peeks.
Preview
Features
Everything the week needs, nothing it doesn’t
Pick a feature to see it in the product.
One calm weekly plan: Owners, dates and status on a single page.
One calm weekly plan
Owners, dates and status on a single page.
Cycle insights
See what shipped and what slipped, before standup.
Quiet automations
Nudges and reviews that run themselves.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| features | { id, title, description, icon?, visual? }[] | — | Features; visual is a drawn product mock composed from components (decorative). |
| variant | "tabs" | "grid" | "tabs" | Switcher list beside one large visual, or three-up cards with small visuals. |
| eyebrow | ReactNode | — | Small label with an ember dot. |
| title | ReactNode | — | Section heading; also names the tablist. |
| description | ReactNode | — | Line under the heading. |
| defaultFeature | string | first feature | Feature shown first in the tabs variant. |
| onFeatureChange | (id) => void | — | Called when the tabs variant switches feature. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.