AddressChip

stablev1.0.0·open in canvas

Truncated address with one-tap copy + optional explorer link; the full address is always the accessible name.

Installnpx shadcn add @cids/address-chip

Live demo

7xKt…9fQ2↗

Motion · tap to replay

honors reduced-motion

Color transition 150ms on the affordances; nothing else.

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

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

<AddressChip address={mint} href={`https://solscan.io/token/${mint}`} />

Tokens · live

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

--surface-container
--outline-variant
--radius-chip
--buy

Truncated address with one-tap copy + optional explorer link; the full address is always the accessible name.

Anatomy

[ 7xKt...9fQ2  ⧉  ↗ ]  <- mono truncate - copy (✓ on success) - explorer

Props

Prop	Type	Default	Notes
`address`	`string`	--	Full address; truncated visually (4...4).
`href`	`string`	--	Explorer URL; renders the link when present.
`className`	`string`	--	cn-merged.

Motion

Color transition 150ms on the affordances; nothing else.

· Truncation is visual only: the text span carries the full address as aria-label, and the copy button names it ("Copy address <full>").
· Copy confirmation is a label change ("Copied"), not color alone.

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.