shadcn.io is not affiliated with official shadcn/ui
Inset Bento Grid Features Block for React
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.
Installation
Overview
A bento feature section for React with Base UI, written for Ironlark, a fictional security-posture tool. A tinted shell with + marks on its corners wraps a raised panel that is light on a light page and dark on a dark one, and the cells share their hairlines inside it. One wide cell holds an area chart of the posture score over thirteen weeks with the week SSO was enforced marked on the line; under it, four small cells each hold one small element: the score as a ring, the three worst findings with a dot for each severity, a row of control states and a count of monitored assets that rolls. The ring reads the last point of the chart, so the two always agree. It is built from Guides, Circular Progress, Badge, Status and Sliding Number with your theme's tokens, so there is no dark scope and no primary colour in it. For security, compliance and reliability products with one trend worth showing and a few checks that back it.
FAQ
How do I change the score and its chart?
Edit SCORES at the top of the file, one number a week with the newest last, and MILESTONE for the marked week. The chart's line, its area, the end marker, the ring's value and the "up N points" line are all derived from that list.
How do I change the small cells?
Each is a Cell with a title, a description and a small component as its child. The findings come from FINDINGS (their severity picks the status dot), the control states from CONTROLS and the count from ASSETS and ADDED. Keep four small cells: they fill the four columns of a desktop row and pair up on a tablet.
Does the panel follow my theme?
Yes. The inner panel is bg-card with a ring, inside a bg-muted/50 shell, so it is light in a light theme and dark in a dark one. The worst finding's dot is the only status colour in the block; the other rows are drawn in foreground weights.
How do screen readers and keyboards handle it?
The section has an h2, the cells are list items with an h3, and the chart is an image with a text alternative that gives its first and last values and the marked week. The ring's number is real text; the findings, the control chips and the ring itself are decoration, so each cell's sentence says what it shows. Nothing in the block is a control.
Related
- 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
Command Center Metric Board Features
Metrics and chartsA metrics console in a card in a card that follows your theme: six metric tiles with a value, a signed change and a sparkline are the tabs of one tablist, and choosing one opens a larger chart of its series in a strip below.
- 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
Dark Inset Icon Grid Features
Card gridsA card-in-card grid of six capabilities for a team knowledge base, each with an icon tile, a sentence and a row showing which of three plans include it.
- Pro
Card Inset Metric Row CTA
Figures and statsA start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.
- 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.