Live Crypto Card UI

Real-time cryptocurrency prices. by Zlatko Marjanović

Show Preview
Live Crypto Card UI

About Live Crypto Card UI

INTRODUCTION

Display live cryptocurrency prices directly in your Framer project. CryptoCard connects to five professional data providers: CoinGecko, Binance, CoinMarketCap, Kraken, and CryptoCompare, and shows accurate, up-to-date prices, 24-hour highs and lows, trading volume, and historical price charts for over 40 top coins including Bitcoin, Ethereum, Solana, and more.

Built for designers who want production-ready crypto data without writing a single line of code. Drop it onto the canvas, pick your coin from the dropdown, choose your data provider, and go live in seconds.

What's Included

  • Live price ticker refreshing every 20 seconds

  • 24-hour High, Low, and Volume statistics

  • Interactive historical price chart (7D · 1M · 6M · 1Y)

  • Range % change indicator with up/down colour coding

  • Animated LIVE pulse badge

  • Automatic coin icon with ticker label fallback

  • Exact error messages with HTTP status code, plain-English hint, Retry button, and a direct link to the provider's documentation

Data Providers

Choose from five professional data sources directly in the property panel. No code required.

  • CoinGecko — Recommended starting point. Free tier works out of the box with no API key. Optional key removes rate limits. Delivers High, Low, and Volume on all plans across all 6 currencies natively.

  • Binance — Exchange-grade market data. No API key needed. WebSocket price stream for near-real-time updates between polls. Full High, Low, and Volume support on all plans.

  • CoinMarketCap — Industry-standard provider. Free API key required (sign up at coinmarketcap.com/api). Note: High and Low are not available on the Basic plan — the card displays a clear advisory when this is the case.

  • Kraken — Trusted European exchange data. No API key required. Full High, Low, and Volume support. Excellent choice for EUR-denominated display.

  • CryptoCompare — Aggregated multi-exchange data. Free tier available with no key. Optional API key for higher rate limits. Full High, Low, and Volume support across all currencies.

Supported Coins

44 top coins included with one-click dropdown selection:

  • BTC · ETH · BNB · SOL · XRP · DOGE · ADA · TRX · TON · AVAX

  • SHIB · LINK · DOT · NEAR · MATIC · LTC · UNI · APT · OP · ARB

  • ATOM · INJ · SUI · FTM · AAVE · LDO · CRV · MKR · ALGO · HBAR

  • XLM · ETC · GRT · SNX · COMP · FIL · RUNE · ICP · KAVA · SAND

  • MANA · FLOW · 1INCH · CHZ

Supported Display Currencies

  • USD – US Dollar

  • GBP – British Pound

  • EUR – Euro

  • JPY – Japanese Yen

  • CHF – Swiss Franc

  • RUB – Russian Ruble

All prices, chart data, 24h high/low, and volume automatically convert to your chosen currency.

Property Panel — 6 Collapsible Groups

  • Content — Coin picker (full dropdown), default chart range, display currency

  • Features — Toggle 24h High/Low, Volume, and Range % change independently

  • Providers — Select your data provider, enter optional API keys per provider

  • Appearance — Dark / Light theme, corner radius, backdrop blur, accent colour override

  • Dark Theme Colours — Override background gradient, border, and text for dark mode

  • Light Theme Colours — Override background gradient, border, and text for light mode

Theme System

Dark and light are fully independent visual systems. Every colour — background gradient, borders, badges, chart fill opacity, range buttons, and stats — changes with the theme. Colour overrides are stored per theme, so your dark customisations never affect light mode and vice versa.

Error Handling

When a provider fails, CryptoCard tells you exactly what went wrong:

  • Error title and HTTP status code displayed clearly

  • Plain-English explanation of the cause and how to fix it

  • One-tap Retry button to re-fetch immediately

  • Direct link to the provider's official API documentation

No silent failures. No broken empty states. No guessing.

Performance

  • Module-level caching — 10 cards on one page make 1 API call, not 10

  • Singleflight deduplication prevents duplicate in-flight requests

  • Binance WebSocket connection shared across all instances of the same coin

  • 5-minute kline cache · 30-minute FX rate cache · 20-second ticker poll

Pricing

Free, no purchase required.

Support

zlatkomarjanovic.zm@gmail.comTAGS (for discoverability)

crypto chart, crypto, cryptocurrency, bitcoin, ethereum, price card, live data, finance, dashboard, widget, dark mode, defi, web3, trading, portfolio, market data, real-time, chart, coingecko, binance, framer component