Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Tech Stack Bands Team Block for React

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

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 stack-ownership section for React with Base UI, for Kelmarsh, a data pipeline. A compact header carries a legend (a filled dot is expert, a hollow one proficient) over four bands that run from rail to rail and end the block. Each band is split by a hairline: at the start the domain (Frontend, Backend, Infrastructure or Data), how many engineers it has and its tools as chips; at the end the engineers, each an initials avatar and a name with the dot and the word for their level. A + mark sits where each divider meets its band's rule. On a phone the chips sit above the engineers. It has no state, so it is a plain server component. It's built from Badge, Avatar and Guides, with your theme's tokens for every colour. The people and levels are fictional example data. For engineering team pages, "what we build with" sections and technical due-diligence pages.

FAQ

How do I add a domain, a tool or an engineer?

Edit DOMAINS at the top of the file. A domain has an id, a label, its tools and its engineers; an engineer is a name and expert (true or false). The header's count and each band's "4 engineers" are counted from the data. A person can appear in several domains, as full-stack engineers do.

How are the levels shown without colour?

By shape and by word: expert is a filled dot and proficient a hollow ring, both in the foreground colour, and the level is written beside each name ("Expert", "Proficient"), so the legend isn't needed to read a row. The dots themselves are decorative.

What do a screen reader and a keyboard get?

Four list items, each with a heading (the domain), a list of tools and a list of engineers, so a screen reader can jump by heading and by list. There is nothing to operate, so there is nothing in the tab order.

How does it fit on a phone?

Each band stacks: the domain, its engineer count and its tools first, then the engineers one per line, with the dot and word at the end of the line. The legend stays in the header. The four bands come to about two screens.

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

Each band draws its top rule with Guides, with + marks where it meets the rails and where the vertical divider meets it. The last band draws no bottom rule: the next block's top rule closes it, so no line is doubled.

  • Pro

    Skill Filter Team

    Skills and expertise

    Seven 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

    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

    Expertise Tags Team

    Skills and expertise

    One engineer's expertise in a split: a person and an endorsements stack on the start, three columns (Strong, Working, Learning) on the end, with the level carried by the chip's weight: solid, outlined or muted.

  • Pro

    Bento Grid Features

    Bentos

    A bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.

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

All 126 team blocks