For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A row of 3 balance cards, each with an icon tile, a signed change and an edge to edge line along its bottom over a fading dot grid
When to use
- Rows of metric tiles, each pairing its value with a sparkline, a meter or a delta
- Health strips for cron jobs, SLOs or data syncs that open with KPI tiles and mini trends
- Metric lists where every row ends in a small trend and a change badge
When not to use
- A single balance read in depth, with axes, a tooltip and computed High and Low figures: use the Balance Tracker block
- A compact 2 by 2 finance grid with delta badges, brand logos and hover readouts: use the Wealth Overview block
- Plain KPI numbers that need only a delta badge, an actions menu or a progress bar: use the Stats blocks
- One metric that deserves a full width plot with axes and a tooltip: use the Area Chart blocks
- A whole overview page that sets a header, summary tiles and a work list around its plots: use the Dashboard blocks
Agent notes
- Replace
PORTFOLIOSin data.tsx;value,changeandchangeValueare display strings, and the unitlessdatapoints never show as figures trendalone picks the success or destructive change color; thecolorfield is unused, since each line strokes from its card'schartConfigCharttakes no props and fetches nothing: every tile value and series comes from constants in the block's own folder
https://reui.io/blocks/chart/sparkline/chart-3.mdget_block("chart-3")npx shadcn@latest add @reui/chart-3Shadcn Components in the Wallet Balances Block
Dependencies
- cn
- recharts
Shadcn Wallet Balances Block
Portfolio Balance Cards with Bottom-Anchored Line Charts on a Dotted Bed. Part of the ReUI Shadcn Charts Sparkline blocks collection.
Three-column grid of balance cards, each with an icon tile, total value, up or down percent change, and a full-width line chart over a dotted background. Built with ReUI Frame and shadcn ChartContainer for wallet, fund, and portfolio dashboards.
It is composed from Frame, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Wallet Balances Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Charts Sparkline blocks to assemble a full screen instead of a single section.
All Shadcn Charts Sparkline Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Inventory Health Inventory KPI summary card with period tabs and per-metric sparkline trends
- KPI Strip Four-column KPI stat row with corner line sparklines and trend badges
- Wealth Overview Finance KPI metric grid with delta badges, brand logo stacks and mini area sparklines
- Distance Tracker Distance Metric Card with Week, Month, Year Tabs and Dotted Sparkline Fill
- KPI Trend Cards Three KPI stat cards with gradient sparkline area charts and hover tooltips
- Order Metrics Order Metrics List Card with Per-Row Line Sparklines and Trend Badges
- Cron Job Health Cron job health KPI strip with SLO sparkline, failure split and next run track
- SLO Fleet Health SLO health KPI strip with lollipop minis for budget left, hourly burn peaks and budget events
- SLO Budgets SLO error budget list with diverging lollipop pins, an attention filter and a New SLO dialog
- Connection Health Data connection KPI strip with health segment bars, a rows synced area trend and failure day bars
Related Shadcn Charts Block Categories
- Area Chart (3) Area chart cards with gradient fills, stacked series, period tabs and hover tooltips for trends over time.
- Bar Chart (14) Bar and column charts, grouped and stacked bars, lollipop stems and segmented bar meters for comparing values.
- Composed Chart (5) Composed charts that layer areas and lines on one axis, with reference lines, goals and release markers.
- Line Chart (6) Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Pie Chart (2) Pie and donut chart cards with center totals, per-segment legends and period tabs for share of a whole.
- Radial Chart (3) Radial gauges with semicircle and full arcs, segmented rings and status labels for progress toward a target.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (301) Browse 301 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (42) Browse 42 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (47) Browse 47 Shadcn Charts blocks across 8 categories.
- Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Wallet Balances block?
Use it for a row of 3 balance cards, each with an icon tile, a signed change and an edge to edge line along its bottom over a fading dot grid.
The Sparkline category fits:
- Rows of metric tiles, each pairing its value with a sparkline, a meter or a delta
- Health strips for cron jobs, SLOs or data syncs that open with KPI tiles and mini trends
- Metric lists where every row ends in a small trend and a change badge
For a single balance read in depth, with axes, a tooltip and computed High and Low figures, use the Balance Tracker block. For a compact 2 by 2 finance grid with delta badges, brand logos and hover readouts, use the Wealth Overview block. For plain KPI numbers that need only a delta badge, an actions menu or a progress bar, use the Stats blocks. For one metric that deserves a full width plot with axes and a tooltip, use the Area Chart blocks. For a whole overview page that sets a header, summary tiles and a work list around its plots, use the Dashboard blocks.
What is the Wallet Balances block built with?
Can I restyle the Wallet Balances block?
How should I use Shadcn sparkline blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.