shadcn.io is not affiliated with official shadcn/ui
Goal Tracking Dashboard Block for React Aria
Three objectives in an accordion with three key results each, a pace-based forecast that reads On track, At risk or Behind, a number field per key result that recomputes the roll-up, and a quarter select for the open and the closed quarter.
Installation
Overview
Know whether a quarter's goals are on pace, with this goal tracking panel for React with React Aria. A hairline frame with a plus mark on each corner holds three Ridgemark objectives in an Accordion; each row shows the objective, a roll-up bar with its percentage and a status in words, and opens to three key results with an owner, a due date, the start and the target, a bar with a tick for the pace of the quarter, a forecast percentage and a Number Input for the current value. Typing a new value recomputes that key result, the objective's roll-up and the count in the header. A Native Select in the header switches between Q4 2026, which is open on day 43 of 92, and Q3 2026, which is closed and reads Hit, Close or Missed. It's built from Accordion, Number Input, Progress, Native Select, Badge and Guides. For OKR trackers and team reviews.
FAQ
How do I fill it with my goals?
Edit OBJECTIVES. Each key result has a title, an owner, a due date, a unit and two spans, q4 for the open quarter and q3 for the closed one, each with a start, a current and a target. A metric that should fall, such as days or tickets, works the same way: progress is the way from the start to the target in whichever direction it runs. PERIODS holds the quarters, their length and the day the open one has reached.
How is the forecast worked out?
Progress so far, as a share of the way from the start to the target, is divided by the share of the quarter that has gone. A forecast of 100% or more reads On track, 80% or more At risk, and anything lower Behind. An objective uses the mean of its key results as its progress and the same rule. In the closed quarter the final progress reads Hit at 100%, Close from 70% and Missed below.
What does editing a value do?
It recomputes that key result's bar, forecast and status, its objective's roll-up and status, and the header count, and the foot says what the key result now reads. Values are whole numbers, and a field left empty keeps the value the demo started with. The closed quarter's fields are read only.
What stays local, and how do I wire it for real?
Everything: the numbers are typed, and edits live in the page and are lost on reload. To make it real, save a changed value from the field to your goals service, feed current from the system that measures it, and take the day count from the calendar.
How does the keyboard work?
Each objective's row is an accordion trigger and one objective is open at a time, so opening another closes the first. Tab moves between the triggers, and Enter or Space opens one. The number fields are ordinary tab stops. React Aria's field commits a typed value on blur, Enter or an arrow key, so the roll-up updates then.