Claim Your Username

Auth25: Claim Your Username

Full-height username picker: a bordered card with a URL-prefixed input group, a live taken/available indicator with icon and colored helper text, suggestion chips that appear when the typed handle is taken, and a submit button that only unlocks once the name is free. Built for onboarding handle selection.

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

Base UI flavor

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

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

Quick start

The installed file exports auth25Demo alongside the block: the exact props behind the preview above. Spread it to get a working username picker in one line.

import { Auth25, auth25Demo } from "@/components/beste/block/auth25";

export default function ClaimUsernamePage() {
  return <Auth25 {...auth25Demo} />;
}

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

import { AtSign } from "lucide-react";
import { Auth25 } from "@/components/beste/block/auth25";

export default function ClaimUsernamePage() {
  return (
    <Auth25
      icon={<AtSign className="size-7" />}
      heading="Claim your username"
      description="This is how others will find you."
      takenUsernames={["jane", "admin", "team"]}
      suggestions={["jane_co", "janecooper"]}
      labels={{
        field: "Username",
        urlPrefix: "beste.co/",
        available: "{username} is available",
        taken: "{username} is already taken",
        submit: "Claim username",
      }}
    />
  );
}

Props

type Auth25Labels = {
  field?: string;
  urlPrefix?: string;
  usernamePlaceholder?: string;
  available?: string;
  taken?: string;
  suggestionsLabel?: string;
  submit?: string;
};

Behavior notes

• Availability checking is fully client-side and synchronous: the typed value is trimmed and lowercased, then checked with takenUsernames.includes(...). There is no debounce and no network call, so takenUsernames has to be a complete list passed in as a prop.
• The status line (labels.available or labels.taken) is a template string with the literal {username} token replaced by the trimmed (but not lowercased) input value, and its color follows the state: emerald for available, rose for taken, matching a Check/X icon inside the input group's trailing addon.
• Suggestion chips render only when the current input is taken and suggestions is non-empty; clicking a chip calls setUsername(suggestion) to fill the input, but does not auto-submit, so the availability check still re-runs against takenUsernames for the new value (a suggestion isn't guaranteed available unless the caller keeps the two lists disjoint).
• The submit button is disabled unless the input is non-empty and not in takenUsernames; the <form> itself only calls e.preventDefault(), so there is no wired network submission even once the button is enabled.
• urlPrefix (e.g. "beste.co/") renders as a static, non-editable addon segment ahead of the input via InputGroupAddon/InputGroupText, not as part of the input's own value.