Skip to content
uicoolkit

  • Components

  • Docs

↑↓ navigate↵ open/ anywhere
Menu

Browse

InteractionsVisualsPatternsFlows
GitHub

Onboarding Steps

ProSample

A multi-step onboarding flow with animated progress, per-step validation and a celebratory finish. Resumes where people left off.

Original
  • onboarding
  • stepper
  • forms
  1. Name your workspace
  2. Invite your team
  3. Pick a starting point

Step 1 of 3

Name your workspace

This is how teammates will find you.

Customize

Accent
Motion
Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet
npx shadcn@latest add @uicoolkit/onboarding-steps

Install commands go live when this item ships to the registry.

Dependencies

  • motion

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Onboarding Steps" component (onboarding-steps) to this project.
Docs: https://uicoolkit.com/components/onboarding-steps
Agent docs: https://uicoolkit.com/components/onboarding-steps.md
Install: npx shadcn@latest add @uicoolkit/onboarding-steps
Preview settings to match: accent Ember, radius 12px, motion on.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)
onboarding-steps.tsx
<Onboarding steps={steps} step={step} onStepChange={setStep} />