Split Layout with Features and Social Proof

Onboarding2: Split Layout with Features and Social Proof

Two-column welcome screen that pairs a benefit checklist and user/rating social proof with a hero image. There is no step state anywhere in the component; features, socialProof, and the button row are all static display data rendered once.

Installation

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/onboarding2?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding2?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding2.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

The installed file exports onboarding2Demo alongside the block: the exact props behind the preview above. Spread it to get a working welcome screen in one line.

import { Onboarding2, onboarding2Demo } from "@/components/beste/block/onboarding2";

export default function OnboardingPage() {
  return <Onboarding2 {...onboarding2Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Onboarding2 } from "@/components/beste/block/onboarding2";

export default function OnboardingPage() {
  return (
    <Onboarding2
      badge="Getting Started"
      heading="Welcome to your new workspace"
      description="Set up your account in minutes and start collaborating right away."
      features={[
        { id: "1", text: "Unlimited projects and tasks" },
        { id: "2", text: "Real-time collaboration" },
        { id: "3", text: "Advanced analytics and reporting" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=1200&h=900&fit=crop",
        alt: "Team workspace",
      }}
      socialProof={{ userCount: "50,000+", rating: 4.9, ratingCount: "2,000+" }}
      buttons={[
        { label: "Continue Setup", href: "/setup" },
        { label: "Skip for now", href: "/dashboard", variant: "ghost" },
      ]}
    />
  );
}

Props

type Feature = { id: string; text: string };

type SocialProof = {
  userCount?: string;
  rating?: number;
  ratingCount?: string;
};

type ButtonConfig = {
  label: string;
  href: string;
  variant?: "default" | "ghost" | "outline";
};

Behavior notes

• There is no wizard or step state in this component at all: features, socialProof, and image are all static informational content rendered once, and the buttons are plain links with no onClick/callback props.
• labels is merged with the demo module's own labels object ({ ...onboarding2Demo.labels, ...labels }) before rendering, so a partial labels prop still falls back to the demo's "active users"/"reviews" wording rather than a hardcoded default inside the component body.
• Only the first button (index 0) gets a trailing ArrowRight icon; every other button renders as plain text, so the primary CTA should be listed first in buttons.
• displayPosition="right" flips the visual order with an arbitrary Tailwind selector (lg:[&>*:first-child]:order-2) applied to the grid wrapper rather than reordering the JSX, so the DOM order (content, then image) stays the same and only the rendered order at lg and above changes.
• The social proof row shows the user-count stat and the star-rating stat independently: each renders only when its own field (userCount or rating) is present, so either can be omitted without leaving a gap.