Chain indicator -- always show the network (ethereum.org heuristic #3). Neutral: chains are facts, not states.
npx shadcn add @cids/network-badge
SolanaBaseNone.
This component declares no motion.
Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.
import { NetworkBadge } from "@/design-system";
<NetworkBadge name="Solana" iconSrc="https://cdn.defitriangle.xyz/logos/network/solana/32.png" />Resolves in the active theme — flip the toggle above to verify.
--surface-container-high--fg-muted--radius-chipParsed from the doc. Interact with the live demo for hover/active.
Chain indicator -- always show the network (ethereum.org heuristic #3). Neutral: chains are facts, not states.
( o Solana ) <- icon (or dot) + name, container-high tint
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | -- | Chain name. |
iconSrc | string | -- | e.g. Logobase network/<slug>; falls back to a dot. |
className | string | -- | cn-merged. |
None.
alt="").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.