shadcn.io is not affiliated with official shadcn/ui
Bento Mixed Cell Grid Features Block for React
A bento of six kinds of cell for a field-service app, each a box with its lines running past the corners: a job list, a rolling figure, avatars with presence, a code window, live switches and a step tracker.
Installation
Overview
A bento feature section for React with Base UI, written for Fieldkit, a fictional field-service app, with six cells that are six different things. A technician's job list is drawn as a UI sketch with the open job's checklist; a first-visit fix rate rolls with Sliding Number over four quarters of bars; the dispatch team is a stack of avatars with presence dots and a line for each technician on site; a webhook payload sits in a code window; four real switches set up the app for one technician; and a step tracker follows a job from dispatch to done. Unlike a bento in shared hairlines, every cell is its own box: its lines run past its corners with a + mark on one, and the cells sit a gap apart, taking four, two, two, four, three and three of six columns under a centred header. On a phone the cells take two columns, so the figure and the team sit side by side. It is built from Guides, Avatar, Badge, Switch and Sliding Number with CSS transitions and your theme's tokens, and nothing in it uses your primary colour. For apps whose pitch is breadth, with a different kind of proof in each cell.
FAQ
How do I change the cells?
Each cell is a Cell in the list at the bottom of the file with a title, a description, a size and its content as the child. CELLS maps the three sizes to their spans: wide takes four of six columns, tile two and half three, and every row adds up to six. The content comes from typed constants at the top (JOBS, TEAM, SETTINGS, STEPS, PAYLOAD), and figures like the number on site are counted from them.
Do the switches do anything?
They are real switches: each is named by its label, the arrow keys and Space work, and the state is kept by the component. They start as SETTINGS says. Wire them to your own settings by controlling each switch with its own state.
Why do the cell lines run past the corners?
Each cell has its own Guides, set to overshoot by half a rem and mark its top corner, so the cells read as sheets on a drafting table. That needs room: the cells sit 1.5rem apart and the grid is inset from the page's rails, or neighbouring lines would touch. The top rule and rails of the page come from the section's own Guides.
How do screen readers and keyboards handle it?
The section has an h2 and every cell an h3. The job list, the code window and the avatars are decoration, hidden from assistive technology and not focusable, and each cell's sentence says what it shows. The switches are the only controls, and the step tracker is an ordered list whose current step is marked aria-current="step".
How does it fit on a phone?
The grid has two columns below md. The job list, the code window, the switches and the tracker take both; the fix rate and the team sit side by side as tiles, and on a phone their sentences are kept for screen readers only so the tiles stay short. The job list shows three of its four jobs, and the team shows four avatars and no list.
Related
- Pro
Bento Grid Features
BentosA 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
A bento for a docs-publishing platform with one flagship cell, a page editor drawn in greys with a pulsing Published status, beside a build-time stat and a version list, over three small cells, in one rounded outline of shared hairlines.
- Pro
A bento for a security-posture tool in a card in a card that follows your theme: one wide cell with an area chart of the score, and four small cells with a score ring, a ranked findings list, control states and an asset count.
- Pro
A masonry wall of six cards of different heights for a team workspace: a checklist whose boxes really tick, a quick-add bar, a stat, a three-lane board, a set of tags and a thread with a mention.
- “Pro
Bento Mixed Widgets Hero
Stats and live dataA split hero with the pitch on one side and, across a solid divider, four proof widgets in hairline cells: a counting stat, avatars, a sparkline and a quote.
- Pro
A three-by-three lattice of seven data-platform primitives on shared hairlines, each with a glyph, a sentence and a mono metric, plus two tinted summary cells that count the primitives and name the one API.