shadcn.io is not affiliated with official shadcn/ui
Accordion Projects Team Block for React Aria
Four projects of a build-planning tool as a single-open accordion beside four counted figures: each row shows a name, a stack of initials, the people, the full-time equivalents and a deadline as a week, and opens to a table of roles and time.
Installation
Overview
A projects section for React with React Aria, for Kirkoswald, a build-planning tool, in a split with a divider. At the start: the header and four figures counted from the data (projects, people assigned, people booked in full, and the nearest deadline). At the end, a single-open accordion that ends the block, a row per project with its name, a stack of initials for who is on it, how many people, the full-time equivalents they add up to and the deadline as a week ("Due Week 9"). Open a row and a small table lists each person with their role and the share of their time the project takes, with a quiet bar. A phone puts the figures above the accordion. It's built from Accordion, Progress, Sliding Number and Guides, with a plain table for the roles. For project pages, resourcing reviews and any team that shares its people across work.
FAQ
How do I change the projects and the people?
Edit PEOPLE (an id, a name and a specific role) and PROJECTS (a name, a deadline as a week number and a team of seats, each a person id and an allocation in percent of that person's time). The figures, the full-time equivalents, the "booked in full" count and the next deadline are computed from the seats, so a person on two projects is counted once and their time adds up across them.
Why is the deadline a week and not a date?
The block is a template, so a date typed into it goes stale. A deadline is "Week 9" of the programme; swap week for whatever your plan counts in. The nearest deadline is the smallest week and names its project.
How does the accordion work with a keyboard?
Each project's row is a button in a heading; Enter or Space opens it and closes the one that was open. Tab moves between the rows; the arrow keys don't. The first project is open when the page loads.
Is the table of roles accessible?
It's a real table with a hidden caption naming the project, column headers and a row header for each person. The bar in the last column is hidden from assistive technology and the percentage beside it is the text. On a phone the role moves under the name so the table fits without scrolling.