A first-run profile setup in three steps with a progress bar: gradient avatar picker and name, a role chip, interest chips with a minimum, a live profile preview and a confetti finish.
npx shadcn@latest add https://hyperblur.dev/r/login-onboarding-profile.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-onboarding-profile.tsx.
import { LoginOnboardingProfile } from "@/components/hyperblur/login-onboarding-profile"
<LoginOnboardingProfile workspace="Acme" onSubmit={(profile) => saveProfile(profile)} />| Prop | Type | Default | Description |
|---|---|---|---|
| workspace | string | "Northwind" | Workspace name shown in the header and preview. |
| title | string | "Set up your profile" | Heading before finishing. |
| avatars | [string, string][] | Eight gradients | Avatar gradient color pairs. |
| roles | string[] | Eight roles | Single-choice role chips. |
| interests | string[] | Twelve interests | Multi-select interest chips. |
| minInterests | number | 3 | Interests required to finish. |
| defaultValues | Partial<{ avatar: number; name: string; role: string; interests: string[] }> | Initial values. | |
| defaultStep | 0 | 1 | 2 | 0 | Initial step. |
| onStepChange | (step: number) => void | Called when the step changes. | |
| onSubmit | (values: { avatar: number; name: string; role: string; interests: string[] }) => boolean | void | Promise<boolean | void> | Called on Finish setup with every value. Return false to show an error. | |
| finishCta | { label: string; href: string } | { label: "Go to your workspace", href: "#workspace" } | Button on the finish screen. |
| accent | string | "#ec4899" | Accent color for buttons, focus rings and highlights. |