shadcn.io is not affiliated with official shadcn/ui
Goal Target Tile Grid Stats Block for Vue
Four regional goal tiles for a sales team, each a count of targets met and a bar of five segments, solid for met, outlined for the next, with a hint row that names the next market and its value.
Installation
Overview
A goal target grid for Vue with Ark UI. A start-aligned header counts the regional targets met ("10 of 20 regional targets are met") with the quarter's week and the dollars won at its end. Under it one inset frame of four tiles, which share their hairlines, shows the regions of a sales team: Europe, North America, Asia Pacific and Latin America, two by two and four across from lg. A region's goal is five targets, a market each, worked in order. Its tile shows how many are met as a rolling number ("3 / 5 targets"), the dollars won against the dollars aimed for, and a bar of five segments: a met target is solid, the next one is outlined and the rest are quiet. A hint row under the bar names the next market and what it is worth ("Next: Nordics, $40K"). Every count, sum and segment is computed from one typed list of regions. It's built from SlidingNumber and Guides, with the bars in your theme's foreground colour.
FAQ
How do I change the regions and their targets?
Edit REGIONS at the top of the file: a region is a name, a list of targets (a market and an amount in dollars) and how many are met. Targets are worked in order, so the first met are solid and the next is outlined. The counts, sums, segments, hint rows and header are computed from the list. A region needs five targets to fill the bar; with another number the segments divide the bar evenly.
How do the segments read?
Solid means met, outlined means next, and a quiet fill means still to come. The three differ in structure (filled, outlined and tinted), not only in colour, so the bar reads in a greyscale print. The bar is one image named with its count ("Europe: 3 of 5 targets met"), because the words above and below it carry the detail.
What is the hint row?
It names the market after the last one met and its value, so a tile says what to close next, not only how far along it is. When every target is met it says "All targets met". The arrow before it mirrors in a right-to-left page.
Is it accessible?
Yes. Each region is a list item with a heading. The count, the dollars and the hint are text, the bar is an image with an accessible name, and amounts sit in bdi elements so a right-to-left page doesn't reorder "$168K of $244K". Contrast passes in light and dark.