Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Squad Matrix Team Block for React

Six 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.

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 squad matrix for React with Base UI, for Meridew, a grocery loyalty app. A start-aligned header sits over a table that runs from rail to rail under a hairline band with + marks and ends the block. Each of the six rows is a squad: its name and a line on its mission. Each of the four columns is a function (Engineering, Design, Product, Data) with a swatch of its avatar tone and a count of how many squads it covers. In each cell sits the person who covers that function in that squad, an initials avatar and a name, or a dash where nobody does. Wider than a phone, the table scrolls sideways in a focusable, labelled region with the squad column kept in view. It's built from Table, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For product organisations that want to show how squads are staffed rather than who reports to whom.

FAQ

How do I change the squads, the functions and who covers what?

Edit FUNCTIONS and SQUADS at the top of the file. A squad is an id, a name, a mission and a people list with one name per function, in the order of FUNCTIONS, and an empty string where nobody covers it. The "5 of 6 squads" counts under each function are worked out from that list, so adding a squad or a function needs no other change.

Is it a real table, and how do assistive technologies read it?

It is a native table with a caption, column headers for the functions and a row header for each squad, so a screen reader announces the squad and the function when you move to a cell.

A dash is hidden from screen readers and replaced by the word "Nobody", so an empty cell reads as one.

How does it fit on a phone?

The table keeps a minimum width, so below it the table scrolls sideways. The scrolling area is focusable and named ("Who covers each function in each Meridew squad"), so a keyboard can scroll it with the arrow keys, and the squad column stays in view with a rule on its edge while the functions slide under it. Nothing else on the page scrolls sideways.

Do the avatar tones mean anything?

Each function has its own greyscale tone, from dark to outline, shown as a swatch in its column heading so the columns read apart at a glance. The tone is only a visual aid: every cell also has the person's name in text, and nothing relies on colour.

How are the lines drawn, and how does the block end?

Guides draws the top rule and its + marks; each row draws a bottom border, except the last, so the table ends on its caption and the next block's top rule closes the block. On a phone the sticky squad column's edge is the only vertical line.

Why does the caption say Year 3?

Years in the blocks are relative ("Year 3", "week 9") so a page never goes stale. Put your own wording in the caption.

  • Pro

    Tree View Org Chart Team

    Leaders and org charts

    A split org chart for a ride-share fleet: copy, an Expand all button and three figures at the start, and a working tree of twenty-two people at the end, with a band that names the picked person's manager and reports.

  • Pro

    Drill-Down Org Chart Team

    Leaders and org charts

    A claims desk as a drill-down in a framed figure of three columns: pick a head of function, then a team lead, and each pick fills the next column; on a phone one list shows at a time under a breadcrumb that steps back.

  • Pro

    Expertise Matrix Team

    Skills and expertise

    Eight CI-platform engineers down a table, four skills across with five-level dots, pill tabs to switch the skill group and a last row for the team average, running rail to rail and scrolling sideways on a phone.

  • Pro

    Coverage Heatmap Team

    Skills and expertise

    A heatmap of six skills by five field-survey people, every cell a button shaded in five foreground steps with its level written in it, a target column, a coverage count with a Thin marker and a polite line that names the picked cell.

  • Pro

    Department Tabs Team

    Tabs and accordions

    Thirty people of a grocery-delivery company by department: underline tabs with headcounts, then each panel opens with its lead on a tinted band and the team as two columns of hairline rows.

  • Pro

    Advisory Board Table Team

    Leaders and org charts

    Seven advisors of a climate-risk model company in a captioned table from rail to rail: an initials avatar and a name, their role and firm, their specialty and the year they began advising.

All 126 team blocks