shadcn.io is not affiliated with official shadcn/ui
Expertise Tags Team Block for React
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.
Installation
Overview
A profile section about one person for React with Base UI, for Lexbrook, a language-learning app. A split with a hairline divider: on the start, the header, the person (an initials avatar, a name and a specific role) and a stack of avatars that reads "Endorsed by 11 colleagues"; on the end, what they know sorted into three columns, Strong, Working and Learning, each with a heading, a line of context and its skills as chips. The level is the chip's weight: solid for strong, outlined for working, muted for learning, and each column says it in words as well. On a phone the three columns become stacked groups. It has no state, so it is a plain server component. It's built from Badge, Avatar, Avatar Group and Guides, with your theme's tokens for every colour. The person, skills and endorsements are fictional example data. For profile pages, "meet the expert" sections and team pages that show what one person is known for.
FAQ
How do I change the person and the skills?
Edit GROUPS at the top of the file: each group has a label, a one-line note and its tags, and the chip style is the group's own chip class. The person's name and role are in the markup, and the endorsers and the total ("11") are ENDORSERS and ENDORSED, so the "+6" is the difference. The skills count under each heading is computed.
How is the level shown without colour?
By the chip's weight and by words. Strong chips are solid foreground, working ones outlined, learning ones a muted fill, and each column has its own heading and a line ("Ask first", "Comfortable", "This year") that says the same thing. Remove the fills and the columns still read.
How do the endorsements work for a screen reader?
The stack of avatars is decorative; the sentence "Endorsed by 11 colleagues" next to it carries the count. If you list the endorsers' names, put them in a list instead, so they are read one by one.
Related
- 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
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
Leadership Spotlight Team
Leaders and org chartsOne leader as a split band, a large initials plate with a three-paragraph bio and three figures, over four executives in cells with overshoot, each with a one-line background and expertise chips that wrap.
- Pro
Expertise Matrix Team
Skills and expertiseEight 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
Practice Depth Grid About
Team and leadersAn expertise section for a data consultancy, with six practice cells in shared hairlines, each listing bench time, projects and tools, plus five depth marks, and a first cell twice as tall.