shadcn.io is not affiliated with official shadcn/ui
Aspect Ratio Mockup Cards Features Block for React Aria
A six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.
Installation
Overview
A report-type feature section for React with React Aria. Under a compact left-aligned header, six cells share their hairlines in a band that runs from rail to rail: a trend line, a table, a funnel, a ranked list, a heat strip and a breakdown ring. Each cell is a 4:3 plate holding a greyscale drawing, then a title and one sentence. The band draws its top rule from the Guides spine and ends the block, so the next section's rule closes it. Three cells across from md, two across on a phone, where the drawings lose a few details so they stay readable. It's built from Aspect Ratio and Guides, with SVG and CSS for the drawings and your theme's tokens for every colour. For analytics, reporting and BI products that want to show what the product draws without pasting a screenshot.
FAQ
How do I add or change a report type?
Each cell is one Report with a name, a sentence and a drawing as its child. Copy a cell, change the text and put your drawing inside it. The drawings are small components at the top of the file (TrendDrawing, TableDrawing…); the plate around them is always 4:3, so any drawing you write fills the same box. Keep the total a multiple of three so the last row has no gap.
Can I use a real screenshot instead of a drawing?
Yes. Put an image in the cell instead of a drawing component and give it className="size-full object-cover". The 4:3 plate crops it to the same shape as the others. The plates are marked aria-hidden, so give the image an empty alt and keep the meaning in the title and sentence beside it.
How does the 4:3 plate work?
The plate is the Aspect Ratio item with ratio={4 / 3}: a CSS aspect-ratio box, with the drawing positioned inside it.
The drawing sits in an absolutely positioned layer with a little padding, so it never changes the box's height.
What changes on a phone?
The grid stays two across, so the plates are about 155 pixels wide. To keep them readable the trend line drops its title bars, the table and the ranked list drop a row, and the breakdown ring drops its legend. Titles and sentences step down a size. Nothing scrolls sideways at 320 pixels.
Does it follow my theme, and what about right-to-left?
Every colour is a token: the drawings use the foreground colour at different strengths, never a palette colour. In a right-to-left layout the trend line mirrors with the page, and the bars in the table and the ranked list start from the start side of the page, which is then on the right.