‹ components

ChainSwitcher

draftv0.9.0·open in canvas

Active network + switch menu — NetworkBadge's interactive sibling.

Installnpx shadcn add @cids/chain-switcher
Live demo

Motion · tap to replay

honors reduced-motion

Panel fades via `animate-in fade-in-0` (Menu's preset). The trigger label swaps instantly on selection — network changes must read as immediate facts.

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

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

const [chain, setChain] = useState("solana");

<ChainSwitcher
  value={chain}
  onValueChange={setChain}
  networks={[
    { id: "solana", label: "Solana", iconSrc: "https://cdn.defitriangle.xyz/network/solana.svg" },
    { id: "eclipse", label: "Eclipse" },
    { id: "sonic", label: "Sonic" },
  ]}
/>

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.

users can't switch mid-sign.

Active network + switch menu — NetworkBadge's interactive sibling.

Anatomy

[ ◉ Solana ▾ ]        ← trigger (Select-height, icon + label)
┌──────────────┐
│ ◉ Solana   ✓ │      ← RadioItem (check = active)
│ ○ Eclipse    │
│ ○ Sonic      │
└──────────────┘      ← Menu-styled panel (surface-bright)

Props

PropTypeDefaultNotes
networksNetwork[]—{ id, label, iconSrc? } — Logobase URLs for icons; dot fallback.
valuestring—Active network id.
onValueChange(id: string) => void—Fire your adapter's switch here.
disabledboolean—E.g. while a transaction is pending.
classNamestring—Merged onto the trigger.

Motion

Panel fades via animate-in fade-in-0 (Menu's preset). The trigger

label swaps instantly on selection — network changes must read as

immediate facts.

A11y

Radix DropdownMenu radio semantics: trigger has aria-haspopup +

aria-expanded and an explicit label naming the current network;

items are role="menuitemradio" with aria-checked; typeahead and

arrow keys work. Icons are decorative — labels carry the meaning.

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.