Plan Overview with Usage Limits

Onboarding22: Plan Overview with Usage Limits

Onboarding screen introducing the current plan's usage limits as progress bars alongside an included/excluded feature checklist. The entire screen is static and prop-driven, with no internal interactive state.

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

Base UI flavor

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

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

Quick start

The installed file exports onboarding22Demo alongside the block: the exact props behind the preview above. Spread it to get a working plan overview step in one line.

import { Onboarding22, onboarding22Demo } from "@/components/beste/block/onboarding22";

export default function OnboardingPage() {
  return <Onboarding22 {...onboarding22Demo} />;
}

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

import { Onboarding22 } from "@/components/beste/block/onboarding22";

export default function OnboardingPage() {
  return (
    <Onboarding22
      badge={{ label: "Your Plan", variant: "secondary" }}
      heading="Here's what you get"
      description="You're on the Free plan. Here's an overview of your limits."
      planName="Free Plan"
      planBadge="Current"
      usageLimits={[
        { label: "Storage", used: 0, total: 5, unit: "GB" },
        { label: "Team members", used: 1, total: 3, unit: "seats" },
        { label: "Projects", used: 0, total: 5, unit: "projects" },
      ]}
      features={[
        { text: "Unlimited viewers", included: true },
        { text: "Community support", included: true },
        { text: "Custom domains", included: false },
        { text: "Priority support", included: false },
      ]}
      primaryButton={{ label: "Continue", href: "/dashboard" }}
      upgradeButton={{ label: "Upgrade Plan", href: "/billing" }}
    />
  );
}

Props

type UsageLimit = { label: string; used: number; total: number; unit: string };
type PlanFeature = { text: string; included: boolean };

Behavior notes

• Unlike most other blocks in this family, Onboarding22 has no useState: it is entirely prop-driven, the progress bars and feature list simply render whatever usageLimits/features are passed with no toggling or client interaction.
• Each usage bar's fill percentage is computed as Math.round((used / total) * 100) (guarded to 0 when total is 0) and passed straight to the shadcn Progress component's value.
• features render in a fixed grid-cols-2 layout regardless of item count; excluded features (included: false) show a small dot in place of the checkmark and fade to text-muted-foreground/50.
• upgradeButton always renders with a leading Crown icon baked into the component, distinct from primaryButton, which never gets an icon prefix.
• used/total are formatted with toLocaleString() before display, so large numbers (e.g. API call limits) render with thousands separators.