Onboarding Checklist
A floating Get started checklist: a progress-ring pill that expands into tasks with done states and deep links, a dismiss, and a spark burst on completion.
Preview
Welcome to Pebble, Ines
Finish setting up in a few minutes. Pick any step; the checklist remembers where you are.
Get started
2 of 5 done
Projects hold docs, tasks and files for one team. Start from a template or blank.
New project
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tasks | ChecklistTask[] | — | { id, title, description?, href?, actionLabel?, done }. Required. |
| onTaskAction | (task) => void | — | A task's deep link was used; mark it done here. |
| onDismiss | () => void | — | Shows a dismiss button; persist the dismissal here. |
| title | ReactNode | "Get started" | Pill and card heading. |
| expanded / defaultExpanded / onExpandedChange | boolean / boolean / (expanded) => void | — / false / — | Progress pill or expanded card. |
| className | string | — | Position the widget, e.g. fixed bottom-4 right-4. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.