Auth24: Complete Your Profile

Full-height profile setup step: a bordered card with an avatar and camera-badge upload trigger, a display-name field, a bio textarea with a helper description, and a save button, plus a skip-for-now link below the card. Built for the post-sign-up onboarding step where a new user personalizes their account.

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

Base UI flavor

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

This installs the block to components/beste/block/auth24.tsx and the button, input, field, avatar, and textarea shadcn/ui primitives it's built on.

Quick start

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

import { Auth24, auth24Demo } from "@/components/beste/block/auth24";

export default function CompleteProfilePage() {
  return <Auth24 {...auth24Demo} />;
}

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

import { Auth24 } from "@/components/beste/block/auth24";

export default function CompleteProfilePage() {
  return (
    <Auth24
      heading="Complete your profile"
      description="Add a few details so teammates can recognize you."
      avatar={{ src: "/avatars/placeholder.jpg", alt: "Your profile photo" }}
      labels={{
        upload: "Upload a profile photo",
        name: "Display name",
        namePlaceholder: "Jane Cooper",
        bio: "Bio",
        bioPlaceholder: "Tell us a little about yourself…",
        submit: "Save and continue",
      }}
      skipPrompt={{ text: "Want to do this later?", linkLabel: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type Auth24Labels = {
  upload?: string;
  name?: string;
  namePlaceholder?: string;
  bio?: string;
  bioPlaceholder?: string;
  bioDescription?: string;
  submit?: string;
};

Behavior notes

• This block has no icon prop; unlike its sibling auth screens the header above the card is just a heading and description, with an Avatar inside the card standing in as the primary visual instead.
• The camera badge over the avatar is a plain <button type="button"> with no onClick handler and no <input type="file"> behind it; it's a purely visual upload trigger (labeled by labels.upload as its aria-label) that the integrator has to wire up.
• The <form> only calls e.preventDefault() on submit; there is no onSubmit prop and no wired network call, so the name/bio fields are fully uncontrolled and nothing captures their values until the integrator adds a handler.
• The name field and bio field each render only when their respective labels.name / labels.bio is set, and the submit button only renders when labels.submit is set, so any combination of the three rows can be dropped independently.
• The bio field's helper text (labels.bioDescription) renders via FieldDescription beneath the Textarea, which is fixed at rows={3} regardless of content length.