Auth11: Account Type Selection

Full-height onboarding step where the user picks an account type from a stack of selectable radio cards, each with an icon, title, and description, then continues with a single submit button. A back/sign-out prompt sits below the card.

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

Base UI flavor

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

This installs the block to components/beste/block/auth11.tsx and the button, radio-group, and field shadcn/ui primitives it's built on.

Quick start

The installed file exports auth11Demo alongside the block: the exact props behind the preview above. Spread it to get a working account-type step in one line.

import { Auth11, auth11Demo } from "@/components/beste/block/auth11";

export default function AccountTypePage() {
  return <Auth11 {...auth11Demo} />;
}

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

import { Building2, User } from "lucide-react";
import { Auth11 } from "@/components/beste/block/auth11";

export default function AccountTypePage() {
  return (
    <Auth11
      heading="How will you use Beste?"
      description="Pick the option that fits you best."
      options={[
        { value: "personal", title: "Personal", description: "For solo projects.", icon: <User className="size-5" /> },
        { value: "enterprise", title: "Enterprise", description: "For large organizations.", icon: <Building2 className="size-5" /> },
      ]}
      labels={{ submit: "Continue" }}
      backPrompt={{ text: "Wrong account?", linkLabel: "Sign out", href: "/sign-out" }}
    />
  );
}

Props

type AccountTypeOption = {
  value: string;
  title: string;
  description: string;
  icon: React.ReactNode;
};

Behavior notes

• The selected value initializes from options[0]?.value, so whichever option is first in the array is pre-selected on mount, not left blank.
• Each option is a full clickable <label> wrapping the icon, title, description, and the actual RadioGroupItem, so clicking anywhere on the card (not just the small radio circle) selects it.
• The active card gets border-primary bg-primary/5; inactive cards only change on hover (hover:border-primary/40 hover:bg-muted/40).
• The <form> only calls e.preventDefault() on submit, and the selected state is never passed to any callback prop, so the chosen account type currently has no way to reach the integrator's own submit handler without further wiring.
• The submit button renders only when labels.submit is set.