shadcn.io is not affiliated with official shadcn/ui
Accordion Projects Team Block for React
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 Base 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. 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.
Related
- Pro
Swimlane Projects Team
Projects and workloadOne person's next twelve weeks as swimlanes: three projects as bars with the role inside and a status word at the end, a shaded column for this week and a last lane that adds up the time per week, with a table of the same facts on a phone.
- Pro
Accordion Profiles Team
Tabs and accordionsTen people of a recruiting-tool company as hairline accordion rows that run from rail to rail; opening a row shows the department, a two-line bio, a personal quote and two text links, one row at a time.
- 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.
- Pro
Capacity Planner Team
Projects and workloadA 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.
- Pro
Squad Matrix Team
Leaders and org chartsSix squads of a grocery loyalty app as a captioned table: a row per squad with its mission, a column per function, and in each cell the person who covers it as an initials avatar and a name, or a dash.
- Pro
Tabbed Ladder Career Paths Team
Learning and mentoringThree career tracks as flat tabs, each a five-rung ladder drawn upward on a rail: the level, the title, one line on what it expects and the people who are on it today.