shadcn.io is not affiliated with official shadcn/ui
Capacity Planner Team Block for React Aria
A capacity planner for an engineering team: six people as stacked bars, a segment per project and the free capacity as a muted track, with a slider for incoming work that draws a hatched piece in the free space of everyone who could take it.
Installation
Overview
A capacity section for React with React Aria, for Thwaite, engineering planning, in a split with a divider. At the start: the header, a slider for incoming work in points with a line that counts who has room for it, and a legend of the three projects with their totals. At the end, a framed figure of six people, each a stacked bar: one segment per project in a foreground tone with its points written inside, and the rest of the person's capacity left as a muted track (part-timers have a shorter one, on the same scale). Slide the incoming work and a hatched piece appears in the free space of everyone who could take it; for those who can't, the row says how many points short they are. It's built from Slider, Avatar and Guides, with your theme's tokens for every colour. For planning pages, team dashboards and any hand-off between sprints.
FAQ
How do I change the people, the projects and the range?
Edit PROJECTS, PEOPLE, MAX_INCOMING and START_INCOMING at the top of the file. A person has a capacity in points and an allocation array with one number per project, in the order of PROJECTS. Free capacity, the legend's totals, the shared scale of the bars and who fits are all computed, so a new person or project needs no other edit.
How does the slider work with a keyboard and a screen reader?
It's a labelled slider ("Incoming work (points)") with a step of one: the arrow keys move by one, Page Up and Page Down by more, Home and End to the ends, and its value is read as "12 points". A polite line under it says how many people have room ("1 of 6 people have room for 12 points"), and each row says "Could take it" with a check, or "Short by 8" with a no-entry icon. A hidden sentence on every row reads its allocation by project.
How are the stacked bars read?
Each segment is a project in a tone of the foreground colour, darkest to lightest, with its points inside; the legend names the three. The muted remainder is free capacity and the hatched piece is the incoming work, in the space that is free. The bars are drawn and hidden from assistive technology; the row's text and its hidden sentence carry the same numbers, so no figure is only visible.
Why are some bars shorter?
Every track is drawn on one scale, the biggest capacity in the list, so a part-timer's 20 points really is a shorter bar than a full-timer's 32. That also keeps the hatched piece honest: the same number of points is the same length on every row.