Crypto Wallet Dashboard

Crypto wallet dashboard screen with total balance, change badge, portfolio chart with period tabs, quick actions and an assets list with sparklines and 24h price change.

Also known as: crypto wallet app ui, cryptocurrency portfolio dashboard, bitcoin wallet app design, crypto app home screen, portfolio balance chart

Pure CSS Mobile Dashboards Responsive Dark #app #chart #crypto #dark #dashboard #mobile

Crypto Wallet Dashboard live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

Beautify

A crypto wallet dashboard screen in pure CSS and vanilla JavaScript, with a dark navy theme: total balance with a change badge, quick actions, a portfolio chart with period tabs and an assets list with sparklines and green or red price changes. It is an HTML mobile template for mobile sites and PWAs and can be packaged with Capacitor. Use it as the home screen of a cryptocurrency wallet, portfolio tracker or fintech app.

How it works

The root .cw-app is a phone-width column (max 430px, centred on wide screens) with the wallet header, the .cw-balance block, the .cw-actions row (Send, Receive, Swap, Buy), the .cw-chart-card, the .cw-assets list and a sticky five-item .cw-tabs bar.

The period buttons are a role="tablist". Each .cw-period holds data-cw-pct (the change for that period) and data-cw-label. Selecting one calls selectPeriod(), which builds a line ending at data-cw-total with series(), draws the SVG .cw-line and .cw-area paths, places the .cw-dot marker and updates the badge, the gain or loss and the low and high values. Falling periods switch the chart and badge to red with .is-down.

Each [data-cw-asset] row reads data-cw-change and draws its own .cw-spark sparkline and an up or down caret in green or red. The sort button reorders the list by data-cw-value or by 24h change. The eye button masks every data-cw-money amount; the address button copies data-cw-copy.

Customization

--cw-bg, --cw-card and --cw-line on .cw-app: the navy background, card colour and borders.
--cw-up and --cw-down: the green and red used for gains, losses, sparklines and the chart.
--cw-accent: the blue of the Buy action, focus rings and the active tab icon.
data-cw-total on .cw-app and data-cw-money on amounts: the balance shown and used by the chart.
data-cw-pct on each .cw-period: the change per period; POINTS in script.js sets how many points each chart has.
series() in script.js: replace it with real price history from your API to draw actual data.

Use cases

Crypto wallet apps: a home screen with balance, actions and holdings.
Portfolio trackers: compare performance over a day, week, month or year.
Fintech and neobank PWAs: a dark investment tab inside a banking app.
Exchange companion apps: quick access to send, receive, swap and buy.

Accessibility

The period tabs use role="tab" with aria-selected and a roving tabindex, so arrow keys, Home and End move between them. The chart SVG has role="img" and a hidden text summary that changes with the period. Price changes have labels such as "up 1.8% in 24 hours", so colour is never the only signal. The hide balances button uses aria-pressed, the toast is a status region, and the quick actions and tab bar items are large touch targets.

Usage notes

The figures are sample data, not live prices. Connect your market data API and update data-cw-value, data-cw-change and the amounts after each fetch.

Crypto Wallet Dashboard at a glance

Framework: Pure CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens, dark design
Category: Mobile Dashboards
License: Free for personal and commercial use

Questions about this template

Can I use the Crypto Wallet Dashboard code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">