shadcn.io is not affiliated with official shadcn/ui
Expertise Matrix Team Block for React
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 Base UI, 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. The scroller is a labelled region that a keyboard can reach (it is in the tab order) and scroll with the arrow keys.
Related
- Pro
Coverage Heatmap Team
Skills and expertiseA 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
Skill Filter Team
Skills and expertiseSeven engineers of a build-cache company in hairline rows with their skills as chips, under six skill chips that float the people who know a skill to the top, fill the matching chips and count how many know it.
- Pro
Tech Stack Bands Team
Skills and expertiseFour domain bands (frontend, backend, infrastructure, data) in a data-pipeline company, each with its tools as chips at the start and its engineers at the end, a filled or hollow dot marking expert or proficient.
- Pro
Skill Bars Team
Skills and expertiseA picker of five e-learning specialists beside a framed figure of five skill bars: choosing a person fills the bars to their scores, each with its number and a tick for the team average on its track.
- Pro
Sortable Skills Matrix About
Team and officesA framed matrix of seven skills by five departments for a learning platform, each cell four dots, sortable by skill or department, with computed department averages in the footer row.
- Pro
Searchable Directory Team
Lists and directoriesA field-service company's eighteen people in one table, under a ruled band with a search field, department and city selects, a live count and a clear button, with an empty state when nobody matches.