Crypto dashboard UI in React: portfolio, markets and trading cards

• Portfolio value over time, with the change for the chosen period.
• Holdings: each coin’s amount, value and share of the portfolio.
• A price chart: candles for traders, a line for everyone else, with volume.
• A trade widget: buy, sell or convert, the amount in coin or fiat, the fee and a review step.
• Markets and news: prices, movers, alerts and a calendar of events that move prices.
• Deposit and withdraw, and the identity checks (KYC) that come before them.

Price data

Prices come from an exchange’s market-data API or a price aggregator. Check its rate limits and terms before you show its data in a product, and cache on your server rather than calling it from every browser.

The Ethereum Chart (candles with volume), the Your Asset Chart (holdings by coin with a price ticker) and the Total Value Chart (balance with a period switch) share one theme. Install the theme and the three cards:

npx shadcn@latest add @mebius/charts-theme
npx shadcn@latest add @mebius/charts-ethereum @mebius/charts-your-asset @mebius/charts-total-value --overwrite

import { EthereumChart } from "@/components/ethereum-chart"
import { TotalValueChart } from "@/components/total-value-chart"
import { YourAssetChart } from "@/components/your-asset-chart"

export default function PortfolioPage() {
  return (
    <main className="grid gap-4 p-6 lg:grid-cols-[448px_minmax(0,1fr)]">
      <TotalValueChart />
      <YourAssetChart />
      <div className="lg:col-span-2">
        <EthereumChart className="max-w-[600px]" />
      </div>
    </main>
  )
}

Each card renders its Figma sample until you pass your own data; the candlestick guide shows how for the Ethereum card.

Bitgo covers portfolio, markets, coin detail, buy, sell and convert, deposit and withdraw, notifications, settings, onboarding and identity checks, for desktop and mobile, in a dark theme. Its code includes the desktop dashboard as one block (metrics-dashboard) with a Dashboard and a Market screen, and exports its cards so you can lay them out yourself:

import { CryptoInsightsCard, CryptoMetricsCard, TradeWidget } from "@/components/metrics-dashboard"

export function TradePanel() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <TradeWidget />
      <div className="flex flex-col gap-4">
        <CryptoMetricsCard />
        <CryptoInsightsCard />
      </div>
    </div>
  )
}

• The full dashboard block is a fixed 1440 × 1024 desktop screen with sample data, a showcase of the Figma frames: wire its buttons and replace its data in the installed file.
• The cards are the reusable part. TradeWidget keeps its own state, so connect its Review button to your order flow.
• For a mobile app, Deskchain is a crypto mobile app kit in light and dark.