Claim Your Username

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth25.tsx instead.

Usage

The file also exports auth25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth25, auth25Demo } from "@/components/blocks/auth/auth25";

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

Props

Behavior notes

• Availability is a pure value derived inline during render from the current input state (normalized username lowercased and trimmed) compared against blockedUsernames; there is no useEffect involved, per the set-state-in-effect rule.
• The blockedUsernames array is a small static demo list, not a real API-backed availability check.
• Suggestion chips only appear when the typed username is taken, and are generated by simple string concatenation (e.g. `${username}1`, `${username}_`), not fetched from anywhere.
• Continue is disabled whenever the normalized username is empty or matches the blocklist.