Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding.
Onboarding screen for account security tasks (recovery email, two-factor authentication, backup codes, password strength), each rendered as a row with a live security score derived from how many are marked done.
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/onboarding23?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding23?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding23.tsx and the badge and button shadcn/ui primitives listed in its dependencies.
The installed file exports onboarding23Demo alongside the block: the exact props behind the preview above. Spread it to get a working security setup step in one line.
import { Onboarding23, onboarding23Demo } from "@/components/beste/block/onboarding23";
export default function OnboardingPage() {
return <Onboarding23 {...onboarding23Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { KeyRound, Mail, Smartphone } from "lucide-react";
import { Onboarding23 } from "@/components/beste/block/onboarding23";
export default function OnboardingPage() {
return (
<Onboarding23
badge={{ label: "Security", variant: "secondary" }}
heading="Secure your account"
description="We recommend completing these steps to keep your account safe."
steps={[
{ id: "email", icon: <Mail className="size-5" />, title: "Verify recovery email", description: "Add a backup email", status: "completed", actionLabel: "Verified" },
{ id: "2fa", icon: <Smartphone className="size-5" />, title: "Two-factor authentication", description: "Add an extra layer of security", status: "pending", actionLabel: "Enable" },
{ id: "backup", icon: <KeyRound className="size-5" />, title: "Backup codes", description: "Generate recovery codes", status: "pending", actionLabel: "Generate" },
]}
primaryButton={{ label: "Continue", href: "/onboarding/finish" }}
secondaryButton={{ label: "I'll do this later", href: "/dashboard" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Small badge above the heading |
heading | string | – | Main headline |
description | string | – | Supporting copy below the heading |
steps | SecurityStep[] | [] | List of security tasks |
primaryButton | { label: string; href: string } | – | Primary CTA link |
secondaryButton | { label: string; href: string } | – | Secondary CTA link |
labels | { stepOf?: string; completed?: string; recommended?: string; optional?: string; securityScore?: string } | – | Template strings for the step counter, completion state, and score line |
currentStep | number | 1 | Current step number, used only to fill the step-of label |
totalSteps | number | 4 | Total step count, used only to fill the step-of label |
className | string | – | Extra classes for the outer <section> |
type SecurityStatus = "completed" | "pending" | "optional";
type SecurityStep = {
id: string;
icon: React.ReactNode;
title: string;
description: string;
status: SecurityStatus;
actionLabel: string;
};useState<Set<string>> from steps where status === "completed"; clicking a step's action button (its own actionLabel, e.g. "Enable", "Generate") only toggles local membership, it doesn't perform any real 2FA enrollment or code generation.SecurityStep.status accepts "completed" | "pending" | "optional", but the component only ever branches on a binary isDone derived from the local completed set, so "optional" steps render identically to "pending" ones with no distinct visual treatment.labels.recommended and labels.optional are declared in the labels prop type but never referenced anywhere in the render; they're currently inert.text-primary once every step is completed (score === 100); otherwise it stays text-accent-foreground.onboarding19
Onboarding screen with a form card for setting up user profile including avatar, display name, bio, and timezone. Perfect for the personal details step in any SaaS onboarding flow.
onboarding29
Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.
onboarding24
Onboarding screen displaying essential keyboard shortcuts in a grouped grid layout with key badges. Perfect for productivity tools that want to accelerate user adoption.
onboarding18
Onboarding screen with toggle switches for configuring notification channels and frequency. Perfect for apps that need granular notification consent during setup.
onboarding21
Completion screen shown after finishing onboarding with a summary of what was configured and quick-start action links. Perfect for ending the setup flow with clear next steps.
onboarding11
Desktop wizard with a vertical side navigation menu and content panels for each step. Perfect for comprehensive account setup requiring multiple configuration screens.