Blocks
Onboarding - Completion
Finish line blocks for onboarding: an all set success screen, a celebration with a recap, a next steps grid and a last chance invite form.
The last screen of an onboarding flow should confirm that it worked and point at one clear next move. These blocks do that without confetti, so they stay calm for people who prefer reduced motion, and the one animated check is skipped entirely when the system asks for less movement.
Workspace names, people and numbers are fictional and come in through typed props. Success messages use role="status" so screen readers announce them.
Style One
All set screen with a check that springs in, a short message with the workspace name and two actions.
Style Two
Celebration card with a gradient header, the time it took, a recap of everything that was set up and a share button that copies the invite link.
Style Three
Next steps grid. Six cards with icons, a recommended badge on the best first move and a skip link for people who would rather explore on their own.
Style Four
Invite and finish. A short invite form with roles, a list of pending invites, a copy link row and a finish button that adapts to whether you invited anyone.
Onboarding - Checklist
Activation blocks that keep new users moving: a getting started checklist, a progress ring with tasks, a collapsible setup widget, a milestone trail with rewards, a tip carousel and a dismissible setup banner.
Onboarding - Welcome
Welcome and first run blocks: quick start actions, a product tour, role and use case pickers, a plan picker and a personalised welcome banner with setup progress.