Account Setup Sections React component
A first-run account setup in collapsible sections: profile with avatar color and role chips, workspace name with an auto-generated URL, email invites as chips with validation, preferences, a segmented progress bar, completed sections that collapse to an editable summary, an optional skip and a finish card.
About the Account Setup Sections component
Account Setup Sections is a first-run onboarding page that collects profile, workspace, team and preference details without feeling like a long form. Only one section is open at a time and each one only asks for a few things.
Finished sections collapse into a one-line summary with Edit, the progress bar shows how far along people are, invites can be skipped, and the workspace URL fills itself in from the name. A finish card confirms everything at the end.
When to use it
Use it right after sign-up to set up a new account or workspace in a SaaS product.
For a horizontal step-by-step flow use the Stepper Wizard or Onboarding Checklist; for ongoing settings use the Settings Toggle List.
Installation
Add the Account Setup Sections component to your project with the shadcn CLI. It lands in components/account-setup-sections.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/account-setup-sectionsOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AccountSetupSections /> accepts 4 props, all optional.
| Prop | Type | Default |
|---|---|---|
| defaultValue | Partial<AccountSetupValue> | — |
| onComplete | (value: AccountSetupValue) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- defaultValuePartial<AccountSetupValue>
- onComplete(value: AccountSetupValue) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Account Setup Sections FAQ
- How do I save the data?
- onComplete receives everything (name, role, color, workspace, slug, invites, timezone, digest) when the last section is finished. Save it there and redirect. Prefill known fields with defaultValue.
- Can I check if the workspace URL is taken?
- The demo shows Available for any slug longer than two characters. Replace that with a debounced call to your API and block Continue while the slug is taken.
- Can people come back to a finished section?
- Yes. Clicking a finished section reopens it with its values; Continue saves it again and opens the next unfinished one.
- How do I add or remove sections?
- SECTIONS defines titles, hints and which are optional. Add a matching case in body() and an entry in canContinue and summary.
- Is it accessible?
- Section headers are buttons with aria-expanded inside headings, open sections are labelled regions, color and role pickers are radiogroups, inputs have labels, and progress and invite errors are announced.
