Profile Setup Card

Onboarding19: Profile Setup Card

Onboarding screen with a form-shaped card for avatar, display name, bio, and timezone. The avatar control and text inputs are visual placeholders rather than a wired-up form: nothing typed or selected is captured in component 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/onboarding19?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Onboarding19, onboarding19Demo } from "@/components/beste/block/onboarding19";

export default function OnboardingPage() {
  return <Onboarding19 {...onboarding19Demo} />;
}

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

import { Onboarding19 } from "@/components/beste/block/onboarding19";

export default function OnboardingPage() {
  return (
    <Onboarding19
      badge={{ label: "Profile", variant: "secondary" }}
      heading="Set up your profile"
      description="Tell us a little about yourself."
      timezones={[
        { value: "utc-5", label: "Eastern Time (UTC-5)" },
        { value: "utc+0", label: "London (UTC+0)" },
        { value: "utc+3", label: "Istanbul (UTC+3)" },
        { value: "utc+9", label: "Tokyo (UTC+9)" },
      ]}
      primaryButton={{ label: "Save & Continue", href: "/onboarding/step-3" }}
      secondaryButton={{ label: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type TimezoneOption = { value: string; label: string };

Behavior notes

• The avatar circle is a <button> that only flips a local hasAvatar boolean between a Camera icon and a User icon; there is no file input, no image upload, and no preview of an actual picture.
• The Input fields for display name and bio are uncontrolled with only a placeholder, no value/onChange, so anything the user types is never read back into component state.
• The timezone Select is likewise uncontrolled (no value/onValueChange); it only renders timezones as options, nothing chosen there is captured either.
• primaryButton ("Save & Continue" in the demo) and secondaryButton are always-enabled plain links; there is no client-side validation and no onSubmit/onSave callback, so this block is a static visual shell for a profile step rather than a working form.
• labels.avatar is declared in the props type but never rendered; only labels.avatarHint ("Click to upload") appears under the avatar control.