Token Price Hero

A marketing hero built around a token price card: current price, an up/down change indicator, and a three-column grid of market cap, 24h volume, and circulating supply. Ideal for a token or project landing page.

By Staaarter Team

Finance

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/token-price-hero.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/finance/finance1.tsx instead.

Usage

The file also exports finance1Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Finance1, finance1Demo } from "@/components/blocks/finance/finance1";

export default function Page() {
  return <Finance1 {...finance1Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Track the market in real time"	Section heading.
description	string	"Live price, volume, and supply data for your token, ready to drop into any landing page."	Supporting line under the heading.
tokenName	string	none	Full token name, e.g. "Ethereum".
tokenSymbol	string	none	Ticker symbol, e.g. "ETH".
price	string	none	Formatted current price, e.g. "$3,412.58".
priceChangePercent	number	none	Signed 24h percent change, e.g. 2.4 or -1.8.
marketCap	string	none	Formatted market cap.
volume24h	string	none	Formatted 24h trading volume.
circulatingSupply	string	none	Formatted circulating supply.
className	string	none	Extra classes for the outer section element.

Behavior notes

Fully static: the price, change percent, and stats grid are all rendered directly from props with no live data fetching or client-side state.
The up/down indicator and its color are derived from the sign of priceChangePercent at render time.

More Finance Blocks

View all →

DAO Governance Proposals

Governance proposal cards with for/against vote bars, quorum progress, and status badges.

Airdrop Claim Card

Token airdrop claim card with an eligibility checklist, expiration timer, and claim flow.

Contract Address List

Smart contract addresses with copy-to-clipboard and explorer link buttons.