Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Accordion Projects Team Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A projects section for Svelte with Ark 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.

What is in the page when a row is closed?

Every row's table is in the page's markup while closed, hidden from sight and from the keyboard.

How does it fit on a phone?

The three counts sit in one row above the accordion, the next deadline under them, and the rows follow. A row's details wrap onto two lines under the name, and the table drops its Role column into the name cell. Nothing scrolls sideways at 320 pixels.

All 126 team blocks