Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Leadership Spotlight Team Block for React

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

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 team section for React with Base UI, for Swinbrook & Dale, a small-business lending platform. A compact header sits over one leader in a split band: a large initials plate with her name and role at the start and, behind a solid divider that meets the band's rule at a plus mark, a three-paragraph bio and three figures. Under it four executives stand in cells with overshooting lines, each with an initials avatar, a name, a role, a one-line background and a few expertise chips that wrap. On a phone the leader comes first and the executives stack in one column. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. The people, figures and backgrounds are examples; no real lender is meant.

FAQ

How do I change the leader and the executives?

Edit LEADER (a name, a role, a bio of three paragraphs and three figures) and EXECUTIVES (a name, a role, a one-line background and a few expertise chips) at the top of the file. Four executives fill the row from xl; two or three work, with the cells wider.

How is it marked up?

The leader's portrait is a figure: the initials plate captioned with the name in an h3 and the role. The three figures are a description list. The executives are a list; each has an h3 and a list of expertise labelled with their name.

How are the lines drawn?

The leader's band and the executives' section each draw a top rule from rail to rail; the divider in the split meets the band's rule at a plus. Each executive's cell has its own lines that overshoot its corners, and the cells are apart, so the lines never touch.

How does it fit on a phone?

The plate shrinks and sits beside the name and role, the bio and figures follow, and the four executives stack. The block stays within about two and a half screens.

Is anything interactive?

No. It is a page section to read; there are no controls or links.

What happens under reduced motion?

The entrances are removed; nothing moves.

  • Pro

    Spotlight Reel Team

    Carousels and reels

    Six people of a seed-saving cooperative as master and detail: a vertical list of names and roles at the start, and at the end the chosen person as type, with their words at display size, a bio and two figures.

  • Pro

    Gallery Spotlight Team

    Carousels and reels

    Six people of a lab-booking platform as a gallery: one person in a framed panel (an initials plate, name, role, quote, bio and three figures) over a filmstrip of six avatars that picks who is in focus.

  • Pro

    Grid Cards Team

    Grids and walls

    Twelve people of a restaurant-software company in a hairline grid that runs from rail to rail, each an initials avatar with a name, a role, a department badge and a city, under a department picker that brings the picked team to the front and dims everyone else.

  • Pro

    Split Layout Team

    Lists and directories

    Ten people of a bookkeeping suite in a split: a sticky start column with the mission in two sentences, three figures and a ghost link, beside ten ruled rows that scroll past it from the lg breakpoint.

  • Pro

    Double Helix Company DNA

    Culture and values

    A company-DNA section for a survey tool: a hand-drawn double helix with five rungs in a framed figure, and a list of five traits that lights a rung and shows what the trait means and how it is hired for.

  • Pro

    Department Quote Wall Team

    Culture and values

    Four departments of a farm-lease marketplace as bands: each names its department and headcount at the start and gives one display quote from someone in it at the end, split by a solid divider.

All 126 team blocks