Address display

AddressDisplay truncates a wallet address and adds buttons to copy it or open its block explorer page.

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

Installation

npx shadcn add @onchain-ui/address-display

Requirements

Add <Toaster /> to your root layout to show a toast when someone copies an address. The install includes @onchain-ui/sonner, which uses your app's CSS tokens and does not depend on next-themes. If you already have components/ui/sonner.tsx, the install uses that file.

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

Pass copyIcon and explorerIcon to use another icon set.

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 select a block explorer. Built-in chains include Ethereum with ID 1, Optimism with 10, Polygon with 137, Base with 8453, and Arbitrum with 42161. Without a chainId, explorer links point to Etherscan.

AddressDisplay also reads explorer URLs from the viem chains in Configuration. Add a chain there or reuse your wagmi chain list to make its explorer available.

Pass a full explorerUrl to override the link for one address. If the component cannot find the supplied chainId and you have not set explorerUrl, it hides the link. This avoids linking to activity on the wrong chain.

Examples

With Base explorer

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

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.

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.

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

Props