onchain-ui

TokenPrice formats a value in your chosen currency. Pass change to show a percentage with a direction icon and trend color.

$3,241.82+2.41%Loading...

token-price.tsxShow code

import { TokenPrice } from "@/components/ui/token-price"export function TokenPriceDemo() {  return <TokenPrice value={3241.82} change={2.41} />}

Installation

npx shadcn add @onchain-ui/token-price

Open in

Usage

import { TokenPrice } from "@/components/ui/token-price"

<TokenPrice value={3241.82} change={2.41} />

Fetch prices in your app and pass them through value. TokenPrice does not request price data.

Examples

Change states

Pass change as a percentage value. For example, -2.34 renders as -2.34%.

$3,241.82+2.41%$0.9978-0.12%$1.000.00%

token-price-changes.tsxShow code

import { TokenPrice } from "@/components/ui/token-price"export function TokenPriceChanges() {  return (    <div className="grid gap-3">      <TokenPrice value={3241.82} change={2.41} />      <TokenPrice value={0.9978} change={-0.12} />      <TokenPrice value={1} change={0} />    </div>  )}

Small values

Small token prices automatically keep more decimal places.

$0.9978+0.02%$0.0346-4.16%$0.00013+12.08%

token-price-small-values.tsxShow code

import { TokenPrice } from "@/components/ui/token-price"export function TokenPriceSmallValues() {  return (    <div className="grid gap-3">      <TokenPrice value={0.9978} change={0.02} />      <TokenPrice value={0.034567} change={-4.16} />      <TokenPrice value={0.00012891} change={12.08} />    </div>  )}

Compact

Set compact to abbreviate large values with units such as K and M.

$1.23M+8.24%Loading...

token-price-compact.tsxShow code

import { TokenPrice } from "@/components/ui/token-price"export function TokenPriceCompact() {  return <TokenPrice value={1234567.89} change={8.24} compact />}

Custom styling

Use priceClassName to style the value and changeClassName to style the percentage change.

$184.42-3.18%Loading...

token-price-custom.tsxShow code

import { TokenPrice } from "@/components/ui/token-price"export function TokenPriceCustom() {  return (    <TokenPrice      value={184.42}      change={-3.18}      className="rounded-md border bg-card px-3 py-2"      priceClassName="text-lg font-semibold"      changeClassName="rounded-sm bg-red-500/10 px-1.5 py-0.5"    />  )}

Props

Prop	Type	Default	Description
`value`	`number \| string \| null \| undefined`	-	Token price value
`currency`	`string`	`"USD"`	ISO 4217 currency code
`locale`	`string`	Browser/default locale	Locale passed to `Intl.NumberFormat`
`compact`	`boolean`	`false`	Use compact notation
`fallback`	`ReactNode`	`"--"`	Shown when price is missing or invalid
`minimumFractionDigits`	`number`	-	Minimum fraction digits for the price
`maximumFractionDigits`	`number`	Based on value size	Maximum fraction digits for the price
`change`	`number \| null`	-	Percentage change, e.g. `-2.34` means `-2.34%`
`trend`	`"up" \| "down" \| "neutral"`	Derived from `change`	Override the change direction
`showChangeIcon`	`boolean`	`true`	Show the trend icon
`changeFractionDigits`	`number`	`2`	Fraction digits for the change value
`hidePositiveSign`	`boolean`	`false`	Hide `+` for positive changes
`className`	`string`	-	Applied to the root wrapper
`priceClassName`	`string`	-	Applied to the formatted price
`changeClassName`	`string`	-	Applied to the change element

Token price

On this page