shadcn.io is not affiliated with official shadcn/ui
Social Links Team Block for Radix UI
Twelve people of an API gateway company in two columns of ruled rows, each ending in text links to the GitHub, X and LinkedIn handles that person has, the handle visible as the link text.
Installation
Overview
A team section for React with Radix UI, for Vantley, an API gateway. Twelve people are listed in two columns of rows that run from rail to rail, with a solid divider between the columns that meets the top rule at a + mark. Each row is an initials avatar, a name, a specific role and text links to the handles that person has: the handle itself is the link text and the network is a small glyph, named for screen readers. Someone with one handle simply has one link, and someone with none has none. The rows of the two columns share their rules, so the lines run straight across. On a phone it is one list, the links wrap under the role, and the first six people show with a Show all 12 button. It's built from Avatar, Button and Guides, with a CSS entrance and your theme's tokens for every colour. For engineering and developer-relations teams whose handles are part of their work.
FAQ
How do I change the people and their handles?
Edit PEOPLE at the top of the file. A person is a name, a role and a handles list; each handle is a network (github, x or linkedin), a label (the network's name, read before the handle) and the handle itself. The first six people fill the first column and the rest the second; keep an even count so the two columns end together.
Where do the links go, and how are they named?
They point to # as a placeholder: put each person's URL in place of it. A link's accessible name is the network and the handle ("GitHub: sven-aldous"), the glyph is hidden from screen readers, and the handle is set left to right on a right-to-left page because handles are identifiers.
Why generic icons and not the networks' logos?
The icon sets blocks use don't include brand logos, so each network gets a plain glyph (a fork for GitHub, an at sign for X, a briefcase for LinkedIn) and its name is in the text for screen readers. If your project has brand icons, swap the three icons at the top of the row; nothing else depends on them.
How do the two columns line up?
On a grid with six shared rows: each column's list lays its rows on the grid's rows, so a row that is taller because the person has three handles makes its neighbour taller too, and the rules between rows run straight across the divider. On a phone there is no grid, just the first list and, once you press Show all, the second.
How does it fit on a phone?
Below md the columns become one list: the first six people, then a Show all 12 button in a band under them. The button is a disclosure that reports whether the rest is shown and which list it controls, and its label never changes. The links wrap onto their own lines under the role.
How are the lines drawn, and how does the block end?
The grid's top rule and the divider's + mark come from Guides; each row draws only a bottom border and the last row of each column draws none, so the next block's top rule closes the block. The divider is the second column's start border, so it follows the page direction.