Address Display

Displays an EVM wallet address with copy-to-clipboard and an optional block explorer link.

Use AddressDisplay anywhere you need a compact wallet identity primitive in tables, cards, account headers, transaction rows, and activity feeds.

address-display.tsxShow code

import { AddressDisplay } from "@/components/ui/address-display"export function AddressDisplayDemo() {  return (    <AddressDisplay address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />  )}

Installation

npx shadcn add https://onchain-ui.dev/r/address-display.json

Open in

Requirements

Add <Toaster /> from sonner to your root layout so copy feedback can show a toast.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Dependencies

The registry item uses viem, sonner, and lucide-react by default.

npm install viem sonner lucide-react

The icons are replaceable. If your app uses another icon set, pass copyIcon and explorerIcon and keep the same component API.

import { Copy01Icon, LinkSquare02Icon } from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"
import { AddressDisplay } from "@/components/ui/address-display"

<AddressDisplay
  address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
  copyIcon={<HugeiconsIcon icon={Copy01Icon} className="size-3 shrink-0" />}
  explorerIcon={
    <HugeiconsIcon icon={LinkSquare02Icon} className="size-3 shrink-0" />
  }
/>

Usage

import { AddressDisplay } from "@/components/ui/address-display"

<AddressDisplay address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />

Pass chainId to link to a known chain's explorer: Ethereum (1), Optimism (10), Polygon (137), Base (8453), and Arbitrum (42161). Without a chainId, explorer links point to Etherscan. For other chains, pass a full explorerUrl.

Examples

With Base Explorer

Pass chainId to link to a known chain's explorer, or explorerUrl for any other chain.

address-display-base.tsxShow code

import { AddressDisplay } from "@/components/ui/address-display"export function AddressDisplayWithExplorer() {  return (    <AddressDisplay      address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"      chainId={8453}    />  )}

Full Address

Disable truncation to show the full address. Full addresses can wrap in narrow containers, so prefer the default truncated display in dense layouts.

address-display-full.tsxShow code

import { AddressDisplay } from "@/components/ui/address-display"export function AddressDisplayFull() {  return (    <AddressDisplay      address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"      truncate={false}      showExplorer={false}    />  )}

Copy Only

Hide the explorer link when you just need clipboard copy.

address-display-copy-only.tsxShow code

import { AddressDisplay } from "@/components/ui/address-display"export function AddressDisplayCopyOnly() {  return (    <AddressDisplay      address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"      showExplorer={false}    />  )}

Props

Prop	Type	Default	Description
`address`	`Address`	-	EVM wallet address (required)
`label`	`ReactNode`	Truncated address	Display label. The copied value is always the underlying address
`truncate`	`boolean`	`true`	Truncate the address
`truncateChars`	`number`	`4`	Characters shown at each end when truncated
`showCopy`	`boolean`	`true`	Show copy-to-clipboard button
`showExplorer`	`boolean`	`true`	Show block explorer link
`chainId`	`number \| null`	`1`	EVM chain id used to pick a known block explorer
`explorerUrl`	`string`	Derived from `chainId`	Full explorer URL override for this address
`copyIcon`	`ReactNode`	Lucide copy icon	Icon rendered before the address when copy is enabled
`explorerIcon`	`ReactNode`	Lucide external link icon	Icon rendered for the explorer link
`className`	`string`	-	Applied to the root wrapper
`addressClassName`	`string`	-	Applied to the address text or copy trigger

On this page