shadcn.io is not affiliated with official shadcn/ui
Threshold Target Cards Stats Block for Svelte
Four delivery-target tiles you can filter with a segmented control (All, Watch, At risk) that dims the others, each with a bar marked at its watch and at-risk thresholds and a state in a glyph and a word.
Installation
Overview
A threshold board for Svelte with Ark UI. A start-aligned header says how many targets are at risk and on watch, and at its end a three-way filter (All, Watch, At risk, each with its count) highlights the tiles that match and dims the rest with a solid tint, so nothing moves and the text keeps its contrast. A polite line under the filter says how many tiles are highlighted. Four tiles sit two by two, a little apart, with lines that run past their corners. A tile shows a figure against its target, a bar of how much of the target is reached with two marks on it (a short one at the watch threshold, a tall one at the at-risk threshold) and both values written under it. The state is a glyph and a word (a check for On target, an eye for Watch, a triangle for At risk), and only At risk also gets the destructive status dot. A state follows from the figure and the two thresholds, all computed from one typed list of delivery metrics. It's built from SegmentGroup, Progress, Status and Guides, with the bars in your theme's foreground colour.
FAQ
How do I change the metrics and thresholds?
Edit METRICS at the top of the file: a metric has a label, its value and target, the warn and critical figures, a period, the digits to show (decimals, suffix) and a write function. A value under critical is At risk, a value under warn is Watch, and anything else is On target. The bar fills to the share of the target reached and the marks stand at each threshold's share of it.
What does the filter do?
It highlights the tiles in the chosen state and gives the others a solid tint, a lighter bar and softer text. It never hides or moves a tile, so the layout does not shift. All highlights every tile. The control is one choice that cannot be switched off, with arrow-key movement and a visible focus ring, and the line under it is announced politely.
Does a state rely on colour?
No. On target, Watch and At risk each have a different glyph and a written word, and the two thresholds are written under each bar. The destructive status dot appears only beside At risk, so the one real alert stands out without carrying the meaning alone.
Is it accessible?
Yes. Each tile is a list item with a heading, the figures and thresholds are text (a dl for the thresholds) and the bar is named with its figures, its share of the target and its state. Values sit in bdi elements so a right-to-left page doesn't reorder "95.2% / 96%". Contrast passes in light and dark, including on dimmed tiles.