Onboarding blocks

Setup checklists, guides and steps that show progress as people complete them.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Setup checklist

Tasks in an Accordion, each with a checkbox, and a progress bar that follows what is done.

Also copy the files they import: Label.

npm install @radix-ui/react-accordion @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-slot react-icons

Numbered steps for each environment in an Accordion that keeps one section open.

npm install @radix-ui/react-accordion @radix-ui/react-slot react-icons

One step of an onboarding flow: selectable module cards, step progress and back and continue actions.

Also copy the files they import: Label.

npm install @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-slot class-variance-authority react-icons