Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Tech Stack Bands Team Block for Ark UI

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

All 126 team blocks