onchain-ui

Displays overlapping token logos for baskets, pools, routes, and portfolio rows.

TokenStack overlaps token logos and shows a +N count when the list exceeds limit. Use it to show the tokens in a pool, basket, or swap route.

token-stack.tsxShow code

import { TokenStack } from "@/components/ui/token-stack"const tokens = [  { symbol: "ETH", name: "Ethereum", src: "https://assets.coingecko.com/coins/images/279/large/ethereum.png" },  { symbol: "USDC", name: "USD Coin", src: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png" },  { symbol: "AERO", name: "Aerodrome", src: "https://assets.coingecko.com/coins/images/31745/large/token.png" },  { symbol: "cbBTC", name: "Coinbase Wrapped BTC", src: "https://assets.coingecko.com/coins/images/40143/large/cbbtc.webp" },]export function TokenStackDemo() {  return <TokenStack tokens={tokens} />}

Installation

npx shadcn add @onchain-ui/token-stack

Open in

Requirements

This component uses the shadcn tooltip. The install adds components/ui/tooltip.tsx if it is missing, or uses your existing file. Wrap your app with TooltipProvider to enable tooltips.

Usage

import { TokenStack } from "@/components/ui/token-stack"

<TokenStack tokens={tokens} limit={5} />

TokenStack renders each item with TokenLogo. Pass renderToken to use another icon component or add a chain badge.

Set isNative on an item to show the chain's native currency icon, even if the item's metadata includes a wrapped-token address.

Examples

Overflow

Limit visible tokens and show a +N overflow indicator.

token-stack-overflow.tsxShow code

import { TokenStack } from "@/components/ui/token-stack"export function TokenStackOverflow({ tokens }) {  return <TokenStack tokens={tokens} limit={4} />}

Tooltips

Enable tooltips when the stack appears without a nearby legend. The overflow tooltip lists hidden tokens by default.

token-stack-tooltip.tsxShow code

import { TokenStack } from "@/components/ui/token-stack"export function TokenStackTooltip({ tokens }) {  return <TokenStack tokens={tokens} limit={4} showTooltip />}

Sizes

Set size to change the size of every logo in the stack.

token-stack-sizes.tsxShow code

import { TokenStack } from "@/components/ui/token-stack"export function TokenStackSizes({ tokens }) {  return (    <div className="flex items-center gap-6">      <TokenStack tokens={tokens} size="sm" />      <TokenStack tokens={tokens} size="md" />      <TokenStack tokens={tokens} size="lg" />    </div>  )}

Custom render

renderToken receives the token and its index. Return the element you want to show for that token.

EUAc

token-stack-custom-render.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"import { TokenStack } from "@/components/ui/token-stack"export function TokenStackCustomRender({ tokens }) {  return (    <TokenStack      tokens={tokens}      renderToken={(token) => (        <TokenLogo          symbol={token.symbol}          name={token.name}          fallback={token.symbol?.slice(0, 1)}          className="border-primary/30 bg-primary/10 text-primary"        />      )}    />  )}

Props

Prop	Type	Default	Description
`tokens`	`TokenStackItem[]`	-	Tokens to display
`limit`	`number`	`5`	Maximum visible tokens before overflow
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Token logo size
`direction`	`"left" \| "right"`	`"left"`	Overlap direction
`showOverflow`	`boolean`	`true`	Show overflow count when tokens exceed limit
`renderOverflow`	`(count: number) => ReactNode`	-	Custom overflow renderer
`renderToken`	`(token, index) => ReactNode`	-	Custom token renderer
`showTooltip`	`boolean`	`false`	Show animated tooltips for tokens
`getTooltipContent`	`(token, index) => ReactNode`	Token name, symbol, then address	Token tooltip content
`getOverflowTooltipContent`	`(tokens) => ReactNode`	Hidden token symbols/names	Overflow tooltip content
`aria-label`	`string`	`"Token stack"`	Accessible label for the group
`className`	`string`	-	Applied to the root wrapper
`itemClassName`	`string`	-	Applied to each token wrapper
`overflowClassName`	`string`	-	Applied to the overflow item

TokenStackItem

Each token accepts the identity props forwarded to TokenLogo:

Prop	Type	Default	Description
`id`	`string`	-	Stable identity override for repeated or addressless tokens
`address`	`string \| null`	-	Token contract address used for icon inference
`chainId`	`number \| null`	-	EVM chain id used for icon inference
`isNative`	`boolean`	`false`	Use the chain's native-currency icon instead of the token contract icon
`src`	`string \| null`	-	Explicit token image URL
`symbol`	`string \| null`	-	Token symbol and fallback text
`name`	`string \| null`	-	Token name and accessible label
`fallback`	`ReactNode`	-	Custom fallback content

Token stack

On this page