shadcn.io is not affiliated with official shadcn/ui
Expertise Matrix Team Block for React Aria
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.
Installation
Overview
A skills matrix for React with React Aria, for Hartsop, a CI platform. A compact header holds a row of pill tabs (Build systems, Cloud and Languages). Under it a table runs from rail to rail: eight engineers down the side, each with an initials avatar, a name and a specific role, and four skills across, every cell five dots where the filled ones are the level. A last, tinted row gives the team average, to one decimal with its dots rounded. Switch the tab and a table of the same shape shows the next group, so the block keeps its height. On a phone the table scrolls sideways in a focusable, labelled region with the person column pinned, and it ends the block. It's built from Table, Tabs, Avatar and Guides, with your theme's tokens for every colour. The levels are fictional example data. For engineering team pages, capability overviews and staffing pages.
FAQ
How are levels shown without colour?
By count: a skill at level 4 has four filled dots and one empty one, all in the foreground colour, so the shape carries the level in any theme. Every cell also carries "Level 4 of 5" for screen readers, and a line under the table explains the dots. The average row repeats the dots, rounded, next to the exact number.
How do the tabs work?
They are Tabs named Skill group: Tab moves into the list and the arrow keys move between the groups. Each group is its own table with the same eight people, so the height never changes when you switch. Only the open group's table is in the page; the other two are not rendered until you open them.
How do I add a group or a person?
Edit GROUPS and PEOPLE at the top of the file. A person's levels are twelve numbers from 0 to 5, four per group, in the order of GROUPS; the table, the dots and the averages follow. A group is read as four skills: to use another size, change the 4 in startOf and the length of each person's levels.
How does the table fit on a phone?
It keeps its width and scrolls sideways, with the person column pinned so you always know whose row you're reading. The tabs above it scroll too, when they don't fit. React Aria's grid is already a tab stop of its own, and its focused cell is scrolled into view, so the scroller itself isn't one.