5 of 52 of 5 done
Five steps before the autumn tour goes on sale.
Photos, a short bio and the lineup.
A preview player goes on the home page.
Twelve shows so far, from Lisbon to Oslo.
Connect payments and list the first shirts.
Fans get a note at hello@beste.co when tickets drop.
2 of 5 done
An onboarding checklist card: a ring beside the title fills as items are checked and reads "3 of 5 done", the next open item is highlighted with its description and an action button or link, and finished items fold to a single struck-through line while a check draws itself in their box. When every item is done the ring completes in green with a check, the title cross-fades to a finished one and an optional Dismiss button appears. The whole list collapses under its header, completion can be controlled or left to the card, and each item is a real checkbox for keyboards and screen readers.
The import and the props worth knowing about, in one place.
import { StepsChecklist } from "@/components/beste/component/steps-checklist";
<StepsChecklist
title="Set up your workspace"
items={[
{ id: "profile", title: "Complete your profile", description: "A photo and a short bio." },
{ id: "invite", title: "Invite the band", action: { label: "Invite", href: "/invite" } },
{ id: "first", title: "Publish the first page", action: { label: "Open the editor", onClick: () => console.log("open") } },
]}
defaultCompleted={["profile"]}
onToggle={(id, done) => console.log(id, done)}
finishedDescription="Your workspace is ready."
onDismiss={() => console.log("dismissed")}
tone="muted" // "muted" | "outline" (default) | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Move through the collapse button, each item's checkbox and the next item's action. |
|---|---|
| Space / Enter on an item | Check or uncheck it. A checked item folds to one line. |
| Space / Enter on the chevron | Collapse or open the whole list. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
items* | ChecklistItem[] | — | |
completed | string[] | — | Ids of the finished items, controlled. |
defaultCompleted | string[] | — | Ids of the finished items, uncontrolled. |
onCompletedChange | (completed: string[]) => void | — | Fires with the full list of finished ids after any toggle. |
onToggle | (id: string, done: boolean) => void | — | Fires for the item that was toggled. |
title | string | "Get started" | |
description | string | — | |
finishedTitle | string | — | Title once every item is done. @defaultValue "You're all set" |
finishedDescription | string | — | |
onDismiss | () => void | — | Shows a Dismiss button in the finished state. |
open | boolean | — | Whether the list is open, controlled. |
defaultOpen | boolean | — | Whether the list starts open, uncontrolled. @defaultValue true |
onOpenChange | (open: boolean) => void | — | |
tone | "muted" | "outline" | "ghost" | "outline" | |
size | "sm" | "default" | "lg" | "default" | |
className | string | — |