Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Project Lead RACI Matrix Profile Block for React

A project lead profile as a RACI matrix: five people by four projects with a button in every cell that cycles responsible, accountable, consulted, informed and none, a check row that flags projects with no or two accountable owners, and a reset.

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

Settle who owns what, with this project lead profile for React with Base UI. A compact header names the project tool, and the frame under it opens on the lead: initials, name, role and place, with a badge counting the projects that are sound. The matrix is a native table on shared hairlines: people down the side with their teams, held in place when it scrolls sideways on a phone, and four projects across. Every cell is a button that cycles Responsible, Accountable, Consulted, Informed and none, and its name says what it is now, such as Fatou: Accountable on Kestrel. A check row under the matrix works out for each project whether exactly one person is accountable: one is marked with a check, none or two or more with a warning glyph and the words No accountable owner or Two accountables. Reset matrix puts it back. It's built from Table, Button, Badge, Avatar and Guides, with a CSS entrance only. The people and projects are invented. For a delivery plan, a kickoff or an ownership review.

FAQ

How do I use my own people and projects?

Edit PEOPLE, PROJECTS and START. A person has an id, initials, a name and a team; a project has an id, a name and a note. START has one entry for each person and project pair with a role of R, A, C, I or empty. The check row, the count of sound projects and the spoken lines are all worked out from the matrix.

How does a cell change?

Each press moves one step through Responsible, Accountable, Consulted, Informed and none, then starts again. The cell shows its letter in a distinct shape and weight rather than a colour: solid for accountable, bold outlined for responsible, a lighter outline for consulted and a quiet fill for informed. The polite line reads the new role and what it does to the project's check.

Why exactly one accountable?

In a RACI matrix each piece of work needs one person who answers for it. With none the work has no owner; with two nobody can say who decides. The check row flags both cases in words, so a project with a warning is not only marked by its icon.

Is anything saved?

No. The changes live in the page and a reload restores the starting matrix. To make it real, save each change with the person, project and role, and let the server refuse a second accountable if your rule is strict.

How do I use it with the keyboard?

Every cell is a button in the tab order, so Tab moves through them row by row and Enter or Space changes the role. The matrix is a labelled region that scrolls sideways, and the names at the start stay in view while it does.

All 100 profile blocks