‹ components

AccountMenu

draftv0.9.0·open in canvas

Connected-wallet menu — address, copy, explorer, disconnect.

Installnpx shadcn add @cids/account-menu
Live demo

Motion · tap to replay

honors reduced-motion

Trigger: `duration-150` bg/border + press scale. Panel: `data-[state=open]:fade-in` via Radix presets. Copy confirmation is a label swap — no bounce.

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

import { AccountMenu, WalletButton } from "@/design-system";

{status === "connected" ? (
  <AccountMenu
    address={address}
    balance="12.4 SOL"
    explorerHref={`https://solscan.io/account/${address}`}
    onDisconnect={disconnect}
  />
) : (
  <WalletButton status={status} onClick={connect} />
)}

Tokens · live

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

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

.**disabled** — trigger opacity 40.

Connected-wallet menu — address, copy, explorer, disconnect.

Anatomy

┌ trigger ─────────────────────┐
│ [A] 7xKt…9fQ2  ●             │  ← Avatar · truncated · online dot
└──────────────┬───────────────┘
               ▼ DropdownMenu
┌──────────────────────────────┐
│ 7xKtF2mP…full address…       │
│ 12.4 SOL                     │
├──────────────────────────────┤
│ Copy address                 │
│ View on explorer             │
├──────────────────────────────┤
│ Disconnect          (sell)   │
└──────────────────────────────┘

Props

PropTypeDefaultNotes
addressstring—Full wallet address (accessible name + copy target).
balancestring—Preformatted balance line.
explorerHrefstring—Opens in a new tab when present.
onDisconnect() => void—Renders the Disconnect item when set.
disabledboolean—Disables the trigger.
classNamestring—cn-merged onto the trigger.

"use client" — Radix menu + ephemeral copied label.

Motion

Trigger: duration-150 bg/border + press scale. Panel:

data-[state=open]:fade-in via Radix presets. Copy confirmation is a

label swap — no bounce.

A11y

Trigger aria-label includes the full address (truncation is

visual only). Radix DropdownMenu: typeahead, arrows, Escape, focus

return. Disconnect uses sell ink + the word "Disconnect" (never color

alone). Online dot is aria-hidden.

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.