Onboarding screen where users pick their primary goal to receive a tailored onboarding path. Each goal card shows a recommended feature set. Perfect for multi-purpose platforms.
Onboarding screen where users pick from an icon-card grid of goals, each card listing the feature set that goal unlocks. Despite the "what do you want to achieve" framing, selection is multi-select rather than a single radio choice.
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/onboarding17?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding17?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding17.tsx and the badge and button shadcn/ui primitives it depends on.
The installed file exports onboarding17Demo alongside the block: the exact props behind the preview above. Spread it to get a working goal selector in one line.
import { Onboarding17, onboarding17Demo } from "@/components/beste/block/onboarding17";
export default function OnboardingPage() {
return <Onboarding17 {...onboarding17Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Gauge, Rocket, Users } from "lucide-react";
import { Onboarding17 } from "@/components/beste/block/onboarding17";
export default function OnboardingPage() {
return (
<Onboarding17
badge={{ label: "Your Goal", variant: "secondary" }}
heading="What do you want to achieve?"
description="We'll tailor your experience based on your goals."
goals={[
{
id: "launch",
icon: <Rocket className="size-6" />,
title: "Launch a product",
description: "Ship your first project fast",
features: ["Templates", "Deployment", "Analytics"],
},
{
id: "scale",
icon: <Gauge className="size-6" />,
title: "Scale my business",
description: "Grow and optimize performance",
features: ["Team tools", "Automations"],
},
{
id: "collaborate",
icon: <Users className="size-6" />,
title: "Collaborate with my team",
description: "Work together more effectively",
features: ["Shared workspace", "Comments"],
},
]}
primaryButton={{ label: "Continue", href: "/onboarding/step-3" }}
secondaryButton={{ label: "Skip for now", 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 |
goals | Goal[] | [] | Grid of selectable goal cards |
primaryButton | { label: string; href: string } | – | Primary CTA, disabled until at least one goal is selected |
secondaryButton | { label: string; href: string } | – | Secondary CTA link |
labels | { stepOf?: string; recommended?: string } | – | Template string for the step counter and a recommended-badge label |
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 Goal = {
id: string;
icon: React.ReactNode;
title: string;
description: string;
features: string[];
};useState<Set<string>>, so despite the heading asking a singular "what do you want to achieve," clicking multiple goal cards keeps all of them selected at once; there is no radio-style single-select enforcement.primaryButton stays disabled until at least one goal is selected, then navigates via a manual window.location.href = primaryButton.href inside onClick rather than an asChild Link.goals.length: 2 or fewer centers as a row, exactly 3 uses 3 columns, a count divisible by 4 uses 4 columns, and everything else falls back to 3 columns.features array renders as small pills at text-[10px], the smallest text size used anywhere in this component.labels.recommended is declared in the props type but never referenced in the render; the "Recommended for you" copy in the demo data has no visible surface in the current markup.onboarding13
Onboarding screen where users select their role or persona to personalize their experience. Each role card shows an icon, title, and description with a selectable highlight state.
onboarding25
Onboarding screen for choosing theme mode (light, dark, system) and accent color. Perfect for apps that offer visual customization as part of the onboarding experience.
onboarding26
Onboarding screen with import options from other platforms, CSV upload, and manual entry. Perfect for SaaS migration flows that help users bring existing data into the platform.
onboarding20
Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps.
onboarding16
Onboarding screen with a grid of selectable interest tags and chips for personalizing content recommendations. Perfect for content platforms, newsletters, and social apps.
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.