Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Team Workload Dashboard Block for React

Six people as capacity bars in a list, each with a word when over capacity, and beside it the chosen person's tasks with a Move to select that offers only people with room and re-derives both bars.

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

Rebalance a sprint by moving tasks instead of sorting a table, with this team workload panel for React with Base UI. A hairline frame with a plus mark on each corner holds six Evenhand teammates in a list at the start, each with a capacity bar (points assigned over points they can take) and a word when they are over, such as "Over capacity by 3". Beside it, the chosen person's tasks each carry a Native Select named "Move to" that offers only the people with room for that task's points ("Dara, 3 points free"). Moving a task re-derives both people's bars, the header sentence and the count of people over capacity. Shine Button saves the plan and Button discards it. It's built from Native Select, Empty, Button, Shine Button and Guides. For planning meetings and team leads.

FAQ

How do I fill it with my own team?

Edit PEOPLE for each person's name, role and capacity in points, and TASKS for each task's title, points and starting owner. Every bar, the free points in each select option, the over-capacity words and the header sentence are worked out from those two lists and the moves made so far.

Why does a task not offer everyone?

A person appears in a task's select only if their free points are at least the task's points, so a move can never push someone over capacity. When nobody has room the select is disabled and says "No one has room". To allow overbooking, drop the freeOf(person) >= task.points test in choicesOf.

How do I use it with the keyboard?

Tab to the people and press one to show their tasks. Each task's select is a native one, so Space or Enter opens it on every target and the arrow keys pick a person. After a move the focus goes to the person's heading, and the status line says who got the task and how many moves are unsaved.

What stays local, and how do I wire it for real?

All of it. Moves and Save plan only change the page and the status line says so; nobody is told and nothing is assigned. To make it real, send the moved task ids and new owners from save to your tracker, and load tasks and capacities from it.

How does it look on a phone?

The people stack above the tasks, each task's select drops under its title and points, and the Save plan foot stays pinned to the bottom of the screen.

All 200 dashboard blocks