shadcn.io is not affiliated with official shadcn/ui
Bento Hero Cell Grid Features Block for React
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.
Installation
Overview
A bento feature section for React with Base UI, written for Berthmark, a fictional docs-publishing platform, with one cell that leads. The flagship takes four of six columns and two rows: a page editor drawn in greyscale with its toolbar, the page outline, a callout being edited and the slash menu open, and a Published status whose dot pulses while the page is live. Beside it, a median build time (a rolling number over the bars of the last fourteen builds) and a short version history with the live version marked; under it, three small cells for search, translations and redirects, each with a small control drawn above its text. The cells share single hairlines inside one rounded outline that sits between the page's rails, under a compact header with the one Shine Button. It is built from Guides, Shine Button, Sliding Number, Status, Badge and Kbd with CSS transitions and your theme's tokens. For documentation, knowledge-base and content products with one capability worth leading with.
FAQ
How do I change the cells and their sizes?
Each cell is a Cell in the list at the bottom of the file, with a title, a one-sentence description, a size and its drawing as the child. CELLS gives each size its span: flagship takes four of six columns and two rows on a desktop, tile takes two columns and wide is a tile that takes the whole row on a tablet. Keep a flagship, two tiles beside it and three below, or a hole would show the border colour behind the cells.
Where do the build time and the version list come from?
From typed constants at the top of the file. The median is computed from BUILDS (the seconds each of the last builds took), and the bars are drawn from the same list, the newest in the strongest tone. VERSIONS holds the history; the one marked live gets the badge.
Can I use a screenshot instead of the drawn editor?
Yes. Replace PageEditor with an img that fills the cell's foot and give it an alt that says what it shows. Keep its container's height (h-80, then flexible from lg), and remove aria-hidden and inert from the wrapper once the content is real.
What does the pulsing dot do, and what about reduced motion?
It is a status dot with a ring that pings, Tailwind's animate-ping, to say the page is live. With reduced motion the ring is off and the dot is steady. Nothing else in the section loops.
How do screen readers and keyboards handle it?
The section has an h2, and each cell is a list item with an h3 and a sentence. The drawings are decoration: each is aria-hidden and inert, so nothing in them is read out or takes focus. The Shine Button is the only control, a real link with a visible focus ring.
The button renders the link it's given with render, with nativeButton={false}.
How does it fit on a phone?
The flagship comes first and the cells stack in one column, so the editor is the first thing under the header. The editor drops its outline column, its formatting tools and its code sample, and keeps a fixed height; on a tablet the grid has two columns, with the flagship across both.
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 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.
- 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
Bento Grid Feature Showcase Hero
Features and tablesA showcase hero with the headline on one side and the pitch on the other, over a bento of six labelled product views in cells that share hairlines.
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.
- 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.