shadcn.io is not affiliated with official shadcn/ui
Department Bento Team Block for Ark UI
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.
Installation
Overview
A teams section for React with Ark 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.