Step 2 of 4
AppearanceCustomize the look and feel of your workspace. You can always change this later in settings.
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.
Settings-style onboarding screen where the user picks a light/dark/system theme (each with a live mini UI preview), an accent color swatch, a border radius, and a layout density, all in one card with four independent selector groups.
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/onboarding25?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding25?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding25.tsx and the badge and button shadcn/ui primitives it depends on.
The installed file exports onboarding25Demo alongside the block: the exact props behind the preview above. Spread it to get a working appearance picker in one line.
import { Onboarding25, onboarding25Demo } from "@/components/beste/block/onboarding25";
export default function OnboardingPage() {
return <Onboarding25 {...onboarding25Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Moon, Sun } from "lucide-react";
import { Onboarding25 } from "@/components/beste/block/onboarding25";
export default function OnboardingPage() {
return (
<Onboarding25
badge={{ label: "Appearance", variant: "secondary" }}
heading="Make it yours"
description="Customize the look and feel of your workspace."
themes={[
{
id: "light",
icon: <Sun className="size-4" />,
label: "Light",
preview: {
bg: "bg-gray-100",
sidebar: "bg-white",
card: "bg-white",
line1: "bg-gray-300",
line2: "bg-gray-200",
accent: "bg-gray-400",
},
},
{
id: "dark",
icon: <Moon className="size-4" />,
label: "Dark",
preview: {
bg: "bg-gray-900",
sidebar: "bg-gray-800",
card: "bg-gray-800",
line1: "bg-gray-600",
line2: "bg-gray-700",
accent: "bg-gray-500",
},
},
]}
accents={[
{ id: "blue", color: "bg-blue-500", label: "Blue" },
{ id: "violet", color: "bg-violet-500", label: "Violet" },
{ id: "rose", color: "bg-rose-500", label: "Rose" },
]}
primaryButton={{ label: "Continue", href: "/setup/next" }}
secondaryButton={{ label: "Skip for now", href: "/dashboard" }}
currentStep={2}
totalSteps={4}
/>
);
}| 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 |
themes | ThemeOption[] | [] | Theme cards with mini UI previews |
accents | AccentColor[] | [] | Accent color swatches |
radiusOptions | RadiusOption[] | [] | Border-radius choices |
densityOptions | DensityOption[] | [] | Layout-density choices |
primaryButton | { label: string; href: string } | – | Primary CTA link |
secondaryButton | { label: string; href: string } | – | Secondary CTA link |
labels | { stepOf?: string; themeTitle?: string; accentTitle?: string; radiusTitle?: string; densityTitle?: string } | – | Group headings and the step template string |
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 ThemeOption = {
id: string;
icon: React.ReactNode;
label: string;
preview: {
bg: string;
sidebar: string;
card: string;
line1: string;
line2: string;
accent: string;
};
};
type AccentColor = { id: string; color: string; label: string };
type RadiusOption = { id: string; label: string; preview: string };
type DensityOption = { id: string; label: string; description: string };useState, seeded with a hardcoded initial value ("system", "blue", "md", "default") that ignores whatever is passed in themes/accents/radiusOptions/densityOptions; there is no defaultTheme-style prop, so the starting selection is always the same regardless of the data supplied.currentStep/totalSteps only feed the "Step of " text via .replace() on labels.stepOf; there is no wizard state, and neither primaryButton nor secondaryButton is gated by any of the four selections, both are always-enabled links.theme.preview object's color classes, so the picker shows a live-looking miniature interface instead of a flat color swatch.accents.find((a) => a.id === selectedAccent) on every render.compact tightest, comfortable loosest) rather than relying on text alone to convey the spacing difference.