‹ components

Onboarding

draftv0.9.0·open in canvas

Identity-gate sheet: connect wallet → pick a handle (live avatar) → join. Built on `Sheet`.

Installnpx shadcn add @cids/onboarding
Live demo

Motion · tap to replay

honors reduced-motion

Sheet slide + drag-dismiss; buttons press-scale `0.98`. Avatar updates instantly as the handle changes (no transition — identity is calm).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Onboarding } from "@/design-system";

<Onboarding
  open={open}
  onOpenChange={setOpen}
  walletAddress={wallet}         // null -> shows Connect
  onConnectWallet={connect}
  handle={handle}
  onHandleChange={setHandle}
  availability={availability}    // "idle" | "checking" | "available" | "taken"
  onJoin={join}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Identity-gate sheet: connect wallet → pick a handle (live avatar) → join. Built on Sheet.

Anatomy

┌ Sheet · "Join the tide" ───────────┐
│ ✓ wallet connected      7xKt…9fQ2  │ ← collapses once connected
│ ◐40  [ @handle        ✓ available ]│ ← live avatar + availability
│ ┌────────────────────────────────┐ │
│ │        Join the tide           │ │ ← full-width brand CTA
│ └────────────────────────────────┘ │
└──────────────────────────────────────┘

Props

PropTypeDefaultNotes
open / onOpenChangeboolean / (b) => void—Controlled, forwarded to Sheet.
walletAddressstring null`—Truthy → step 1 collapses to a checked row (shortened addr).
onConnectWallet() => void—Shown when not connected.
handlestring—Controlled; sanitized to [a-z0-9_].
onHandleChange(v: string) => void—Availability check is the caller's job.
availability"idle" "checking" \"available" \"taken"`"idle"Inline indicator + gates the CTA.
onJoin() => void—Fires only when connected + available.

Motion

Sheet slide + drag-dismiss; buttons press-scale 0.98. Avatar updates instantly as the handle changes (no transition — identity is calm).

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.