Step 2 of 4
Your GoalWe'll tailor your experience based on your primary goal. You can explore everything later.
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.
Upgrade to Pro
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.