shadcn.io is not affiliated with official shadcn/ui
Accordion Projects Team Block for Radix UI
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 Radix UI, 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. The arrow keys, Home and End also move between the rows. 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.