Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Goal Tracking Dashboard Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Know whether a quarter's goals are on pace, with this goal tracking panel for Solid with Ark UI. 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. The number fields are ordinary tab stops.

How does it look on a phone?

An objective's row wraps to two lines: its name and status, then its bar and percentage. Each key result stacks its details, its bar and its field.