Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Department Bento Team Block for React

The six teams of a school-transport operator as a bento of cells that stand apart: the drivers fill a two-by-two cell with a large headcount and a group of avatars, and every other team has a headcount, a lead and a line on what it owns.

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 teams section for React with Base UI, for Pendleford, a school-transport operator. Instead of people it shows departments: six cells that stand apart on a four-column bento, each drawing its own lines with a + on its start corner. The drivers and escorts, the biggest team, fill a two-by-two cell with a large headcount and a group of avatars that ends in a "+32" count. Dispatch takes two columns, and the workshop, safeguarding, family support and route planning each have a headcount badge, a line on what the team owns and the name of its lead. The cells rise in one after another when the page loads, and the drivers' avatars spread a little when you hover the cell. Two columns from sm, four from lg; a phone has one column with the drivers first. It's built from Avatar, Avatar Group, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For operations companies, schools, clinics and any organisation whose teams matter more than its names.

FAQ

How do I change the teams?

Edit DEPARTMENTS at the top of the file: a team is a name, a count, a lead and a sentence on what it owns. The first entry is the large cell, and DRIVERS lists the people whose initials show in its group; the "+32" is counted from the team's size minus the avatars shown. The header's total is the sum of the headcounts. Where each cell sits is the SPANS list, in the same order as the teams.

How does the bento lay out, and what if I add a team?

From lg there are four columns: the first team takes two columns and two rows, dispatch takes two columns, and the last two teams take two each, which fills three rows exactly. A seventh team needs an entry in SPANS and a place in that arithmetic; an empty position is just empty page, because the cells stand apart rather than share lines.

What moves, and what happens with reduced motion?

The cells fade up one after another when the page loads, each 80 milliseconds after the last, and the drivers' avatars slide apart a little when you hover the cell. Both are CSS transitions, so with reduced motion the entrance is off and the cells simply appear; the avatars still change place on hover, instantly. The spread is decoration: the group is hidden from assistive technology and the same count is in the text.

How are the lines drawn?

Each cell is a relative box with its own Guides: four sides, a little overshoot past each corner and a + on the start corner. The overshoot needs room, so the cells sit 24 pixels apart and inset from the page's rails. The top rule and the rails come from the page's spine, and the block keeps its bottom padding because nothing runs rail to rail at its end.

How does it fit on a phone?

Below sm the cells stack in one column, the drivers first, and each cell keeps all of its words. The drivers' cell is the tallest at about 300 pixels, so the block is about three screens on a small phone at most. Nothing scrolls sideways at 320 pixels.

Who is read as the lead of a team?

Each cell ends with a line that a screen reader hears as "Led by Noor Haddad", for example, and that shows as the lead's initials and name with ", lead". The headcount is in a badge and reads "9 people". The department's name is the cell's h3.

  • Pro

    Bento Grid Team

    Grids and walls

    The leadership of a lighting-design studio as a bento that shares its hairlines: a two-by-two founder cell, four leader cells with a focus line each, and a closing cell that counts the studio with a dot for every person.

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

  • 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

    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

    Inset Border Card Grid Features

    Live controls

    Six ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.

  • Pro

    Animated Accordion Team

    Tabs and accordions

    Twelve people of a clinic-booking company in four department rows of a multi-open accordion, each with a stack of initials and a headcount, and an Expand all button that opens every department at once.

All 126 team blocks