Best for
Web3 founders and crypto hobbyists prototyping a portfolio tracker or token analytics view
Stack
A ready-made Crypto Dashboard UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Crypto Dashboardtemplate does, how it's wired, and where it's opinionated.
This template is a dark-ready crypto portfolio dashboard built on Next.js and shadcn/ui. The hero is a Portfolio Value Card showing total portfolio value in USD with a 24-hour change percentage and a color-coded delta badge — green for gains, red for losses. The Token List Table (shadcn/ui Table) displays each token's name, symbol, live price, 24h change percentage, portfolio allocation, and amount held, with shadcn/ui Price Change Badges colored by direction.
A Recharts AreaChart renders the selected token's price history over a 7-day or 30-day window. The Token Selector (shadcn/ui Tabs or Select) switches the AreaChart between tokens. A Market Cap Donut (Recharts PieChart) shows the portfolio allocation by token so users can see concentration at a glance.
The honest caveats: all price data is hardcoded mock arrays — the template ships with no API connection. The PieChart uses browser APIs that crash SSR unless wrapped in a dynamic import (covered in gotchas). The CoinGecko free tier has tight rate limits that will exhaust instantly if you call it on every page load without ISR caching — the gotchas section shows exactly how to add it. Unix timestamps from CoinGecko are in seconds; Recharts expects milliseconds — another silent gotcha that makes the AreaChart appear flat.
Key UI components
Portfolio Value CardTotal portfolio value in USD with 24h change percentage and color-coded delta
Token List Tableshadcn/ui Table with token name, symbol, price, 24h change %, allocation %, amount
Price AreaChartRecharts AreaChart for the selected token's price history over 7d or 30d
Market Cap DonutRecharts PieChart showing portfolio allocation percentage by token
Token Selectorshadcn/ui Tabs or Select to switch the AreaChart between tokens
Price Change Badgesshadcn/ui Badge colored green or red by 24h price direction
Libraries it leans on
rechartsPrice history AreaChart and Market Cap allocation PieChart with ResponsiveContainer
date-fnsOHLCV timestamp formatting for the AreaChart x-axis labels
shadcn/uiCard, Table, Badge, Tabs, Select components throughout the dashboard
Fork it and get it running
Forking this template takes under 5 minutes in the browser — no local Node.js setup required to see the full portfolio UI.
Fork the template
Open https://v0.dev/chat/community/JfGEPnqVAVL in your browser and click the 'Fork' button in the top-right corner. A new V0 chat opens with the Crypto Dashboard loaded in the preview — Portfolio Value Card at the top, Token List Table below, Price AreaChart and Market Cap Donut rendering with mock BTC/ETH/SOL data.
Tip: A free V0 account is all you need. Forking does not consume credits.
You should see: A new V0 chat opens with the full Crypto Dashboard preview showing mock portfolio data and all chart sections.
Switch to a dark theme in Design Mode
Press Option+D to open Design Mode. Crypto dashboards conventionally use dark backgrounds — update the page background to zinc-950 and cards to zinc-900 in Design Mode without spending credits. Replace the mock token names (BTC, ETH, SOL) in the Token List Table with your own token symbols. Update Price Change Badge colors if you want a custom accent.
Tip: Design Mode edits are free. Most crypto UIs use green-400 for gains and red-400 for losses — update these color tokens in Design Mode.
You should see: The dashboard switches to your dark crypto aesthetic with your token names in the preview.
Connect the CoinGecko API for live prices
Type this prompt in the V0 chat: 'Replace the mock token prices with a Server Component fetch from /api/prices that calls the CoinGecko public API for BTC, ETH, SOL prices and add export const revalidate = 60 so prices refresh every minute'. V0 generates app/api/prices/route.ts, fetches the CoinGecko /simple/price endpoint, and updates the Token List Table and Portfolio Value Card to use the response.
Tip: The CoinGecko free tier has rate limits — the revalidate = 60 ISR caching is essential to avoid 429 errors. Add COINGECKO_API_KEY to the Vars panel only if using the Pro tier.
You should see: The Token List Table shows live BTC, ETH, SOL prices from CoinGecko with 24h change percentages.
Add API credentials to the Vars panel
If using the CoinGecko Pro tier, click the Vars panel in the V0 editor and add COINGECKO_API_KEY. For Supabase portfolio storage, add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Never paste API keys directly into the chat. Use NEXT_PUBLIC_ prefix only for values safe to expose to the browser.
Tip: The CoinGecko free tier endpoint does not require an API key — skip this step if staying on the free tier.
You should see: Your credentials are saved in the Vars panel and accessible in route handlers.
Publish to Vercel
Click Share → Publish → 'Publish to Production'. Vercel builds and deploys in under 60 seconds. Open the live URL and confirm the Portfolio Value Card shows a real total, the Token List Table has current prices, and the Price AreaChart renders the token history without a flat line.
You should see: The Crypto Dashboard is live at a Vercel subdomain with real CoinGecko prices loading correctly.
Set up ISR revalidation and a custom domain
If you did not already add it in the API route, prompt V0: 'Add revalidate = 60 to the /api/prices route so prices refresh every minute via ISR'. For a custom domain, go to Vercel Dashboard → your project → Settings → Domains → Add Domain and follow the DNS instructions.
Tip: ISR with revalidate = 60 means Vercel serves cached prices and only calls CoinGecko once per minute — critical for staying under the free tier limit.
You should see: Prices update approximately every 60 seconds without hitting CoinGecko on every page view.
The prompt pack
Copy-paste these straight into v0's chat to customize the Crypto Dashboardtemplate. Each one names this template's own components — no generic filler.
Convert to a dark crypto aesthetic
Converts the dashboard to a dark crypto aesthetic across every component — Portfolio Value Card, Token List Table, Price AreaChart, and Market Cap Donut — in a single prompt.
Convert the entire Crypto Dashboard to a dark theme: page background zinc-950, all shadcn/ui Cards to zinc-900, Portfolio Value Card border zinc-700. Set the Price AreaChart gradient fill to start at cyan-500 with 30% opacity fading to transparent. Update the Price Change Badges: use green-400 text with green-400/20 background for positive 24h changes, and red-400 text with red-400/20 background for negative. Update the Market Cap Donut slices to a five-color palette that is readable on zinc-900.
Add 7D / 30D / 90D chart period switcher
Adds a time period selector to the Price AreaChart so users can zoom out to 30 or 90 days without replacing the Token Selector that already exists.
Add shadcn/ui Tabs directly above the Price AreaChart with three options: '7D', '30D', and '90D'. When a tab is selected, update the fetch URL for the price history to include the period parameter (e.g. /api/price-history?token=BTC&days=7). Re-render the AreaChart with the returned data using the same Recharts ResponsiveContainer wrapper. Keep both tabs and the Token Selector (for switching between tokens) visible simultaneously.
Connect to CoinGecko API for live token prices
Replaces all hardcoded mock prices with live CoinGecko data cached via Vercel ISR — the fastest path from mock to production prices without burning the free-tier rate limit.
Create app/api/prices/route.ts. Inside, fetch https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana&vs_currencies=usd&include_24hr_change=true. Map the response to the shape the Token List Table expects: { id, name, symbol, price, change_24h, allocation }. Add export const revalidate = 60 so Vercel caches the response and only calls CoinGecko once per minute. Replace all mock token data in the Token List Table and Portfolio Value Card calculation with this Server Component fetch.Add a portfolio holdings form
Adds a user-editable holdings form that drives the Portfolio Value Card total and Token List Table allocation percentages from real user-entered token amounts.
Add a shadcn/ui Sheet panel that opens from a 'Holdings' Button in the top navigation. Inside the Sheet, render a Form with two fields: token symbol (Select populated from the current Token List Table tokens) and amount owned (numeric Input). On submit, persist the holding to localStorage under a 'portfolio-holdings' key. Recompute the Portfolio Value Card total by multiplying each holding's amount by the current live price from the CoinGecko fetch. Update the Token List Table allocation % column based on the new holdings.
Connect to Supabase for multi-user portfolio tracking
Adds per-user portfolio storage in Supabase with Clerk authentication so every user sees their own holdings in the Portfolio Value Card, Token List Table, and Market Cap Donut.
Create a portfolios table in Supabase with columns id (uuid), user_id (uuid), token_symbol (text), amount (numeric). Install @clerk/nextjs; add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to the Vars panel. Add clerkMiddleware to middleware.ts to protect the /dashboard route. In the Server Component, query supabase.from('portfolios').select().eq('user_id', userId) using the Clerk user ID from auth().userId. Compute total portfolio value client-side by multiplying each holding's amount by the corresponding live price from the CoinGecko route. Add a UserButton from @clerk/nextjs in the top navigation for sign-in and sign-out.Add price alert cron job with Slack notifications
Creates a serverless cron job that checks CoinGecko prices every 5 minutes and sends a Slack notification whenever a user-defined price threshold is crossed.
Create app/api/cron/price-check/route.ts. Add a Vercel Cron Job in vercel.json: { "crons": [{ "path": "/api/cron/price-check", "schedule": "*/5 * * * *" }] }. Inside the route handler, fetch live prices from CoinGecko, retrieve user-defined alert thresholds from a Supabase alerts table (columns: user_id, token_symbol, threshold_price, direction ['above'|'below']). For each threshold crossed, POST to SLACK_WEBHOOK_URL with a message like 'BTC crossed above $70,000'. Add SLACK_WEBHOOK_URL to the Vars panel.Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
CoinGecko API returns 429 Too Many Requests on the free tierWhy: The CoinGecko free API allows 10–30 calls per minute. If every page load or preview refresh calls it directly, the limit exhausts within seconds and all price fetches fail.
Fix: Add export const revalidate = 60 to the /api/prices route handler so Vercel caches the CoinGecko response for 60 seconds and only makes one upstream call per minute regardless of page traffic.
Add export const revalidate = 60 to the /api/prices route handler so CoinGecko is only called once per minute via Vercel ISR caching
window is not defined for the Market Cap Donut PieChart during SSRWhy: Recharts PieChart accesses browser APIs (window, document) during the server-side render pass in Next.js, crashing the page with a ReferenceError before any HTML is sent to the browser.
Fix: Wrap the Market Cap Donut PieChart component in a dynamic import: dynamic(() => import('./AllocationChart'), { ssr: false }). This defers rendering to the client where browser globals exist.
Wrap the allocation PieChart in a Next.js dynamic import with ssr: false to fix the window is not defined SSR error
Price change percentage shows NaN for some tokensWhy: CoinGecko returns the 24h_change field as a float that may be null for newly listed tokens or tokens with low liquidity. Rendering null directly produces NaN in the Price Change Badge.
Fix: Add a nullish coalescing guard before rendering: (token.price_change_24h ?? 0).toFixed(2). Apply the same guard to the color-coding logic for the Price Change Badges.
Add a null guard to the 24h price change display: use (value ?? 0).toFixed(2) to handle tokens with missing change data
Token Price AreaChart is flat or shows only a single data pointWhy: OHLCV price history data from CoinGecko and most crypto APIs returns timestamps as Unix seconds (e.g. 1700000000). Recharts AreaChart expects millisecond timestamps — seconds render as nearly-identical values on the x-axis, producing a flat line.
Fix: Multiply each timestamp by 1000 when mapping API data to the Recharts format: data.map(([ts, price]) => ({ date: ts * 1000, price })). The AreaChart x-axis will then show correctly spaced dates.
Multiply CoinGecko timestamp values by 1000 when mapping to Recharts data format — Recharts expects milliseconds, CoinGecko returns seconds
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- Personal portfolio tracker for 3–10 tokens with CoinGecko free tier prices
- Crypto startup investor demo showing portfolio value and allocation
- Token analytics prototype to test UX with early users before building a backend
- Hackathon crypto app where the mock data is good enough for a demo
Go custom when
- Real-time WebSocket price streaming at sub-second intervals is needed (Binance or Kraken feeds require persistent connections V0 won't manage)
- On-chain data such as wallet balances or DeFi positions requires a Web3 provider integration
- Tax reporting with cost-basis tracking and capital gains calculation is required
- User-managed API key vaults or OAuth-based exchange authentication must be built in
RapidDev wires your V0 crypto dashboard to live exchange data, Supabase portfolio storage, and real-time price alerts — production-ready in 3–5 days.
Frequently asked questions
Is the Crypto Dashboard V0 template free to use?
Yes. V0 community templates are free to fork with a free V0 account. Forking does not consume credits. AI chat edits after forking use credits from your V0 plan. The CoinGecko API also has a free tier that works for this template without an API key.
Can I use this template commercially — in a startup or paid product?
Yes. Code generated by V0 is yours to use commercially. Recharts is MIT licensed and shadcn/ui is MIT licensed. CoinGecko's free tier requires attribution on your product if you use it in a commercial product — check their terms. The Pro tier removes this requirement.
Why does my fork show a blank chart in the V0 preview after connecting CoinGecko?
Two common causes: (1) the V0 preview sandbox does not inject Vars panel env vars — those are only available at build time on Vercel; (2) esm.sh module resolution in the preview can fail for some packages. Click Share → Publish to test the full deployed build with real env vars.
The Price AreaChart looks completely flat after I connect the CoinGecko API — why?
CoinGecko returns OHLCV timestamps in Unix seconds. Recharts expects milliseconds. Multiply each timestamp by 1000 when mapping the API response to chart data: { date: ts * 1000, price: p }. See the gotchas section above for the exact fix prompt.
How do I avoid hitting the CoinGecko rate limit?
Add export const revalidate = 60 to your /api/prices route handler. This tells Vercel to cache the CoinGecko response for 60 seconds — so even under heavy traffic, CoinGecko only receives one request per minute. The quick prompt in the prompt pack adds this automatically.
How do I add per-user portfolio tracking so each user sees their own holdings?
Use the 'Connect to Supabase for multi-user portfolio tracking' advanced prompt in the prompt pack. It adds Clerk authentication and a Supabase portfolios table, then filters all queries by the signed-in user's ID.
Can RapidDev help me add live exchange data and real-time alerts to this dashboard?
Yes. RapidDev wires V0 crypto dashboards to live exchange APIs, Supabase portfolio storage, and Vercel cron-based price alert systems — typically production-ready in 3–5 days.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.