shadcn.io is not affiliated with official shadcn/ui
Icon KPI Tile Grid Stats Block for React
Four linked KPI tiles for a home-services marketplace, each an icon plate, a value, a label and an Open report line, in a hairline frame beside a split divider.
Installation
Overview
An icon KPI tile grid for React with Base UI. It is a reverse split between solid rails: the four tiles sit in a hairline frame with + marks on its corners at the start, two by two, and past a divider that runs up to the top rule the header follows, with the headline number ("1,284 jobs booked this month"), a sentence and a link to all reports. Each tile is one link to its report. It holds an icon plate, the value large, its label under it, and an "Open report" line whose arrow nudges on hover. The figures (jobs booked, pros taking jobs, customers who came back and the median first reply) are added up from one typed set of records, and the headline reads the same total. The header comes first in the DOM, so on a phone it leads, then the tiles, still two by two. For a marketplace, operations or reporting hub where every number leads to a page.
FAQ
How do I change the figures and where the tiles go?
Edit the records at the top of the file (WEEKLY_JOBS, PROS_BY_TRADE, CUSTOMERS, REPLY_MINUTES); KPIS computes each tile's value from them (a sum, a share and a median) and gives it an icon from lucide-react. Point each tile at its report by changing its href, which is # in the demo. The first tile's value is also the headline's number.
How does the header's link work on each target?
The "All reports" button is a link (href="#"): point it at your reports index.
The Button renders the link it's given with render, with nativeButton={false}, so it stays a link and not a button.
Why is the whole tile one link?
A card that is only partly clickable makes the target small and the focus ring odd. Here each tile is a single a with the icon, value, label and "Open report" inside it, with a focus ring drawn inside the frame, so the target is the whole cell and a keyboard user tabs through four stops. The icon plate is decoration and hidden from assistive technology; the link's name is its content, "Jobs booked 1,284 Open report". The hover tint is a solid mix of the muted colour, because a translucent one would show the hairline colour through it.
Is it accessible?
Yes. The tiles are a list of links; the label comes first in the DOM and the value is drawn above it, so a screen reader hears the label before its number. The arrows are decoration, hidden from assistive technology, and they mirror in right-to-left pages. Values sit in bdi elements. The nudge on hover is a CSS transition that stops with reduced motion.
Why is the frame at the start and the header at the end?
The block is a reverse split: the header comes first in the DOM, so it leads on a phone and in a screen reader's order, and lg:col-start-1 lg:row-start-1 draws the tiles in the first column. The divider is the start line of the header's cell, which reaches the top rule, and the header sticks near the top when the tiles are taller than the screen.
Related
- Pro
Vertical KPI Rail Stats
KPI bands and tilesA split for a shipment tracker: the headline and the week at the start, and past a hairline divider four figures stacked in a narrow rail, each with its change on the week before.
- Pro
Compact KPI Tile Grid Stats
KPI bands and tilesSix dense KPI tiles for a café group in one hairline frame, with a Day, Week and Month switch that re-reads all six figures and rolls their digits.
- Pro
Status Tile Grid Stats
KPI bands and tilesSix service tiles for a hosting company, each with a state word and a p95 latency, where healthy tiles are plain and only a degraded and an incident tile change, with their cause and how long they have lasted.
- Pro
Crosshair Quad Tile Grid Stats
KPI bands and tilesFour support-desk figures in the four quadrants of a crosshair, with a hairline cross at the centre where a round badge names the quarter, each with its value and its change on the quarter before.
- Pro
Metric Hero Strip Features
Metrics and chartsFour metric-over-feature columns for a data-pipeline tool: a giant tabular figure and label, then the feature that makes it true, in one divided band under a centred header.
- Pro
Reverse Split News List Hero
Updates and timelinesA reverse split hero on drafting lines for a team docs workspace: a greyscale product illustration beside an announcement pill, the headline, a ruled list of the latest updates as links, a Shine Button and a second action.