shadcn.io is not affiliated with official shadcn/ui
Goal Tracker CRUD Block for React Aria
A quarter's goals as cards whose progress is the average of their key results, each with a stepper for its current number, a quiet row to add a key result, a quick line to add a goal, and an Undo for every removal.
Installation
Overview
Plan a team's quarter in one place, with this goal tracker for React with React Aria. A hairline frame with a plus mark on each corner opens on a quick line, an Input where a goal and Enter add it, with its Add goal button the only Shine Button. Three goals sit in a frame of fixed height, each a card with its key results. A key result has a title, "of 30 teams, 60%", and a Number Input with plus and minus buttons for its current value; its progress is the share of its target. The goal's own Progress bar is the average of its key results and the card says so: "57% from 3 key results". A quiet row at the foot of each goal adds a key result from a title and a target, and Remove on a key result or a goal leaves "Removed ... Undo" in the foot. The band is ruled by Guides, and an Empty state shows when every goal is gone. For OKRs, quarterly plans and any figure that should roll up from the parts under it.
FAQ
How does a goal's progress work?
Each key result's share is its current number over its target, capped at 100. The goal is the rounded average of its key results' shares, so one finished key result does not finish the goal. Both numbers and the sentence "57% from 3 key results" are derived by shareOf and rollupOf from the data, never typed, and a goal with no key results reads "No key results yet" at 0%.
How do I change a current number?
Type in the field or use its plus and minus buttons; the percentages and the bar update as you go and the status line says where the goal stands. The field keeps what you typed, so clearing it to retype does not jump. Under React Aria the field commits when you leave it or press Enter.
How do I add a key result?
Use the quiet row at the foot of a goal: a title, a whole-number target above 0 and Add (or Enter). A reason shows in a line that is always there if either is missing, and the new key result starts at 0 with focus in its stepper.
What does Undo bring back?
The last removal, a key result or a whole goal, with the numbers as they were. Adding or removing something else replaces it, so Undo never restores something older than what you see.