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 data integration strip of 4 stat cards mixing segment bars, a rows synced area and failure day bars, each with a toned delta chip
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
- One data source opened in a side panel with Sync Now, Pause and schema drift: use the Data Connection block
- Connected apps grouped into sections, each with a status and a sync or disconnect menu: use the App Connections 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
HEALTHY_YESTERDAY,LINKED_LAST_WEEK,ROWS_BY_DAYandFAILED_BY_DAYare typed baselines; only today derives fromCONNECTIONS- Replace
RAW_CONNECTIONSin data.ts;health,rows,failedand each dataset's link flag and drift columns are typed by hand DeltaChiprenders nothing when its baseline is 0 or equals today, so a card can lose its change chip on real dataCharttakes 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-46.mdget_block("chart-46")npx shadcn@latest add @reui/chart-46Shadcn Components in the Connection Health Block
Dependencies
- cn
- recharts
Shadcn Connection Health Block
Data connection KPI strip with health segment bars, a rows synced area trend and failure day bars. Part of the ReUI Shadcn Charts Sparkline blocks collection.
4 KPI tiles for a data integration fleet: connection health and linked dataset segment bars, a rows synced area trend and failed syncs by day. Each value has a toned delta chip. ReUI Frame, shadcn Chart on Recharts. ETL sync monitoring.
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 Connection Health 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
- Wallet Balances Portfolio Balance Cards with Bottom-Anchored Line Charts on a Dotted Bed
- 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
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 Connection Health block?
Use it for a data integration strip of 4 stat cards mixing segment bars, a rows synced area and failure day bars, each with a toned delta chip.
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 one data source opened in a side panel with Sync Now, Pause and schema drift, use the Data Connection block. For connected apps grouped into sections, each with a status and a sync or disconnect menu, use the App Connections 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 Connection Health block built with?
Can I restyle the Connection Health 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.