Use Cases Section
Persona tabs with a sliding lit-key pill that crossfade a drawn product scene, three benefits and a quote per team.
Preview
Use cases
Built for every team that plans
Reviews that land in the plan, not in DMs
- Pin feedback to the exact frame
- Turn comments into tasks in one key
- See what ships this week at a glance
“Feedback finally has a home, and it’s next to the deadline.”
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cases | { id, label, icon?, headline, benefits, scene?, quote? }[] | — | One persona per tab: three benefits, a drawn product scene (decorative) and a quote { text, name, role }. |
| eyebrow | ReactNode | — | Small label with an ember dot. |
| title | ReactNode | — | Heading; names the section (otherwise "Use cases"). |
| description | ReactNode | — | Line under the heading. |
| defaultCase | string | first case | Persona shown first. |
| onCaseChange | (id) => void | — | Called when the persona changes. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.