shadcn.io is not affiliated with official shadcn/ui
Icon KPI Tile Grid Stats Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.