shadcn.io is not affiliated with official shadcn/ui
OKR Target Cards Stats Block for Svelte
Three objective cards for an OKR tool, each with a large completion percent that is the mean of its three key results, nested key-result bars with current and target, and a line naming the key result furthest from its goal.
Installation
Overview
An OKR board for Svelte with Ark UI. A centred header states how far the quarter's objectives have got ("This quarter's objectives are 67% complete"), and under it three cards sit a little apart, each with lines that run past its corners. A card is one objective: its owner, a large completion percent that rolls up once when it scrolls into view, and three key results nested under it, each with current / target text and a bar of how far it has come. A closing line names the key result furthest from its target. An objective's percent is the mean of its key results' whole percents, so you can check it by hand, and a key result that wants a number to fall (launch time, support tickets) is measured from where it started to its target. Every percent, mean and name is computed from one typed list of objectives. It's built from Progress, SlidingNumber and Guides, with the bars in your theme's foreground colour. Three across from lg, a stack of three below it.
FAQ
How do I change the objectives and key results?
Edit OBJECTIVES at the top of the file: an objective is a title, an owner and its keyResults. A key result has a label, a current figure, a target, a from (where it stood when the quarter began) and a write function that formats a reading ("$41.6K", "620 ms"). The percents, the mean per objective, the quarter's headline and each card's closing line are computed from the list.
How does a key result that has to go down get a percent?
Its from is above its target. Progress is (current - from) / (target - from), clamped to 0 to 100, so median launch time from 900 ms to a target of 450 ms, now at 620 ms, is 62%. A number that climbs from nothing has a from of 0. The label should say which way the number has to go, as "Support tickets per 100 new teams" does with its figures (14 now, 8 to reach).
Is the big percent a plain average?
It is the mean of the three key results' whole percents, rounded, so what you read on the card adds up. The headline's percent is the mean of the objectives' percents in the same way.
Is it accessible?
Yes. Each objective is a list item with a heading, and its key results are a nested list. Every bar is named with its label, its figures and its percent ("Teams enrolled in the beta: 1,420 of 1,500, 95%"), and the figures are also text next to it. Values sit in bdi elements so a right-to-left page doesn't reorder "$41.6K / $60.0K". Contrast passes in light and dark.
The bar's name comes from the Progress translations, because Ark's Progress ignores aria-label.