shadcn.io is not affiliated with official shadcn/ui
Quarter Goals Team Block for React
One person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.
Installation
Overview
A goals section for React with Base UI, for Rydal, a project tracker. A start-aligned header with the person at its end (an initials avatar, a name, a role) leads into a tinted band that states the objective and how far it has come: a number that rolls up once in view, and a bar. Under it, three key results sit in hairline rows that run from rail to rail and end the block. A row is a title that opens its notes in place, the numbers behind it (where it is now and the target), a quiet bar with a tick for how far the quarter has gone, who owns it, and a word with an icon for its status: On track, At risk or Done. No bar is green, amber or red: the status is the word. It's built from Avatar, Progress, Sliding Number and Guides, with CSS transitions and your theme's tokens for every colour. For performance reviews, planning pages and any profile that shows one person's goals.
FAQ
How do I change the objective and the key results?
Edit PERSON, QUARTER and KEY_RESULTS at the top of the file. A key result is a title, an owner, the number it started from (from), where it is now (current), the target, a unit written after each number, and its notes. The bar, the percentage, the status and the objective's overall number are all computed from those, so nothing else needs editing. A number that has to fall, like load time, works without a flag: it is measured from where it started to the target.
How is the status worked out?
Not typed: it follows the quarter. QUARTER says which week it is (week 8 of 13 here), which makes the pace 62%. A key result at 100% is Done; one within ten points of the pace is On track; one further behind is At risk. Change SLACK to be stricter or looser. The objective's overall number is the mean of the key results' whole percentages, so a reader can check it by hand.
What is the tick on each bar, and does a screen reader get it?
The tick marks where the quarter stands, so a bar that ends before it is behind time and one past it is ahead. The bars are drawn and hidden from assistive technology; the same facts are written as text beside them (the percentage, "Now 2.4 s, target 1.5 s", the status word and the owner), so nothing depends on seeing the bar.
How do the notes open, and which one is open at first?
Each title is a button inside the row's heading, with aria-expanded and aria-controls; Enter or Space opens its notes in place, and the chevron turns. A closed panel has no height and is hidden from sight and from the keyboard. The row that is At risk starts open, so the reason is in view without a click. The disclosure is plain markup and script, so it behaves the same on every target, and it needs no Collapsible.
Why are the bars not coloured by status?
Colour in these blocks is for the one call to action. A bar is foreground tone; the status is a word with an icon (a check for On track and Done, a warning triangle for At risk), so it reads in a greyscale print, for a colour-blind reader and in every theme.
How does it fit on a phone?
The person drops under the header, the objective and its bar stack, and each row becomes a column: the title and numbers, then the bar with its percentage, then the status and owner side by side. Nothing scrolls sideways at 320 pixels. Numbers and units are wrapped so a right-to-left layout keeps "2.4 s" and "62%" in reading order.
Related
- Pro
Goal Rings Team
Learning and mentoringFour goal rings for a quarterly-planning tool in cells that share their hairlines: each ring fills to the goal's progress with a tick where the quarter stands, so ahead and behind read at a glance, over a band that counts goals done, in progress and blocked.
- Pro
Progress Tracker Learning Goals Team
Learning and mentoringA team learning tracker in a split: a completion ring worked out from five goals with four counted facts at the start, and a row per person at the end with their goal, a progress bar, the quarter it is due and details that open in place.
- Pro
Course Steps Learning Path Team
Learning and mentoringOne person's study path for a certification as read-only vertical steps: five courses in hairline rows, ticked when done, a halo on the one in progress, each with a quiet bar and the hours to go.
- Pro
OKR Target Cards Stats
Goals and progressThree 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.
- Pro
Goal Status Board Stats
Goals and progressA rail-to-rail status board for sales pace: four cells that lead with a state word and a glyph, Ahead, On pace, Behind or Missed, three figures each, and a legend row that defines the four glyphs.
- Pro
Utilisation Bars Team
Projects and workloadSeven designers' utilisation as hairline rows with a bar under each name and one line through every bar at 85%, tasks and points beside it, a word and an icon for who is over the line, a team average and a switch that sorts by load or by name.