Onboarding & states

Installation & usage

npx @youj/cli add app-checklist

Also installs async-button, button, collapse, counter, icon-check, icon-chevron-down, icon-git-branch, icon-globe, icon-minimize, icon-party-popper, icon-rocket, icon-user-plus, icon-wand, icon-x, presence-list, typography, use-announcer, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/app/checklist.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

checklist-view.tsx

'use client'

import { Checklist, type ChecklistProps } from '@/blocks/app/checklist'

export function ChecklistView({ completed, steps }: Pick<ChecklistProps, 'completed' | 'steps'>) {
  return (
    <Checklist
      completed={completed}
      steps={steps}
      copy={{ region: 'Getting started' }}
      onCompletedChange={(ids) => {
        // your code
      }}
      onMinimizedChange={(minimized) => {
        // your code
      }}
      onComplete={async (step) => {
        // await your API here; the block shows progress until it settles
      }}
    />
  )
}

Reference

Props18 props, 1 types

Props

Checklist props
Prop	Type	Default
`defaultCompleted`	`string[]` Ids of the steps done when the card opens, uncontrolled. Default: the first step.	–
`completed`	`string[]` Ids of the done steps, controlled. Pair it with `onCompletedChange`.	–
`onCompletedChange`	`(ids: string[]) => void` Called with the done ids after a step completes.	–
`defaultMinimized`	`boolean` Starts folded into the pill, uncontrolled. default false	`false`
`minimized`	`boolean` Folded into the pill, controlled. Pair it with `onMinimizedChange`.	–
`onMinimizedChange`	`(minimized: boolean) => void` Called when the card folds or unfolds.	–
`embedded`	`boolean` Inside a host app: no faux app, page landmark or h1; the card sits where the host lays it out. Default true; `false` draws its own page around it (a centered canvas and an `h1`).	–
`fill`	`boolean` Take the whole width it's given instead of stopping at its natural width (672px at 100% scale). default false	`false`
`product`	`string` The product its copy names. Prefer `brand`. default "Fern"	`"Fern"`
`brand`	`{ name: string; logo?: ReactNode }` The product the copy names. Default: Fern.	–
`steps`	`ChecklistStep[]` The steps, in order. Default: the demo's five, from workspace to domain.	–
`onComplete`	`(step: ChecklistStep) => Promise<unknown> \| unknown` Does a step's work when its action is pressed; resolve to mark it done, throw to show why it failed. Default: a short demo wait.	–
`onDismiss`	`() => void` Called when the finished checklist is dismissed.	–
`headingLevel`	`1 \| 2 \| 3` The card title's level. default 2	`2`
`locale`	`string` Formats the percentage. Default: the provider's locale.	–
`copy`	`Partial<ChecklistCopy>` Any of the card's strings, to rewrite or translate.	–
`classNames`	`{ list?: string }` Classes for its parts: `list` is the region the steps scroll in (its height, 306px at 100%, holds the card's size as steps open, close and finish).	–
`theme`	`ThemeInput`	–

`ChecklistStep`

ChecklistStep props
Prop	Type	Default
`id`Required	`string`	–
`title`Required	`string`	–
`description`Required	`string` A line of why, under the open step's title.	–
`action`Required	`string` The button that does the step.	–
`icon`	`ReactNode` Sits before the action's label.	–

Strings18 keys for copy

Built from5 components

Accessibilitystatus, pictures, choices, motion

#Installation & usage

#Description

#Code

#Reference

Props

ChecklistStep

Strings

Built from

Components used

#Accessibility

Installation & usage

Description

Code

Reference

`ChecklistStep`

Accessibility