shadcn.io is not affiliated with official shadcn/ui
Bento Hero Cell Grid Features Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.