# Crypto dashboard components for React

> 12 Crypto dashboard components for React and Tailwind: top coins, market tiles, balances, allocation, swaps, bridges and wallet drawers.

The parts of a crypto dashboard, from the market overview at the top to the wallet at the side. Coin lists with sparklines, a total balance over time, allocation as a donut or a treemap, a swap and a cross chain bridge, and the account switcher and wallet drawer that hold it together. All of it installs with the shadcn CLI and has no wallet or chain dependency.

## Components

### Top Coins

A top cryptocurrencies widget with Bitcoin, Ethereum and Solana prices and sparklines over 3M to 1Y, scrubbable for any week.

```bash
npx shadcn@latest add @ssych/top-coins
```

Live preview: https://ssych.com/library/top-coins · Plain text: https://ssych.com/library/top-coins.md

### Market Shelf

A row of crypto market tiles with price, daily change and a 7 day sparkline, for exchange and portfolio home screens.

```bash
npx shadcn@latest add @ssych/market-shelf
```

Live preview: https://ssych.com/library/market-shelf · Plain text: https://ssych.com/library/market-shelf.md

### Total Balance

A total balance chart for crypto and banking accounts with windows from 24h to All, reading balance, change and drawdown at any point.

```bash
npx shadcn@latest add @ssych/total-balance
```

Live preview: https://ssych.com/library/total-balance · Plain text: https://ssych.com/library/total-balance.md

### Balance Header

A wallet and bank balance header with the total, the 24h move and a privacy toggle that masks every figure, for crypto and fintech apps.

```bash
npx shadcn@latest add @ssych/balance-header
```

Live preview: https://ssych.com/library/balance-header · Plain text: https://ssych.com/library/balance-header.md

### Donut Chart

A crypto portfolio donut chart that shows allocation as a ring with the total in the centre, the ring and its legend highlighting together.

```bash
npx shadcn@latest add @ssych/donut-chart
```

Live preview: https://ssych.com/library/donut-chart · Plain text: https://ssych.com/library/donut-chart.md

### Allocation Treemap

A portfolio allocation treemap with holdings sized by weight, reading the share and value of each position on hover.

```bash
npx shadcn@latest add @ssych/allocation-treemap
```

Live preview: https://ssych.com/library/allocation-treemap · Plain text: https://ssych.com/library/allocation-treemap.md

### Swap Ticket

A token swap widget for DEX and crypto wallet apps, with an editable amount, a flip button, a token picker and slippage settings.

```bash
npx shadcn@latest add @ssych/swap-ticket
```

Live preview: https://ssych.com/library/swap-ticket · Plain text: https://ssych.com/library/swap-ticket.md

### Cross Chain Swap

A cross chain bridge and swap widget for moving tokens between networks like Ethereum, Solana and Arbitrum, reversible in one click.

```bash
npx shadcn@latest add @ssych/cross-chain-swap
```

Live preview: https://ssych.com/library/cross-chain-swap · Plain text: https://ssych.com/library/cross-chain-swap.md

### Wallet Drawer

A crypto wallet drawer with holdings, DeFi positions and activity, plus send, receive and settings views, for web3 apps.

```bash
npx shadcn@latest add @ssych/wallet-drawer
```

Live preview: https://ssych.com/library/wallet-drawer · Plain text: https://ssych.com/library/wallet-drawer.md

### Account Dropdown

A crypto wallet account switcher that lists each address with its balance and share of the total, for multi wallet web3 apps.

```bash
npx shadcn@latest add @ssych/account-dropdown
```

Live preview: https://ssych.com/library/account-dropdown · Plain text: https://ssych.com/library/account-dropdown.md

### Series Spotlight

A multi line chart of twelve crypto assets with one highlighted at a time, for comparing coins without losing the one you track.

```bash
npx shadcn@latest add @ssych/series-spotlight
```

Live preview: https://ssych.com/library/series-spotlight · Plain text: https://ssych.com/library/series-spotlight.md

### Net Flow Bars

A net flow bar chart for daily ETF, exchange or wallet inflows and outflows, where dragging across days sums the run.

```bash
npx shadcn@latest add @ssych/flow-bars
```

Live preview: https://ssych.com/library/flow-bars · Plain text: https://ssych.com/library/flow-bars.md


## Questions

### Do I get a whole dashboard or single parts?

This page lists single parts, all free. Full composed screens, a crypto wallet and a token screener among them, are paid and listed under Dashboards.

### Which wallet library do they work with?

Any. They take plain props, so you wire them to wagmi, viem or your own API.

## Links

- This page: https://ssych.com/library/s/crypto-dashboard
- All components: https://ssych.com/llms-full.txt