shadcn.io is not affiliated with official shadcn/ui
Drawn Bento Use Cases Block for React Aria
A bento of four use cases in shared hairlines, each with a small greyscale drawing of its screen, a badge, a title, one line and a metric.
Installation
Overview
A use-cases block for React with React Aria, written for Rotamoor, a fictional scheduling tool for shift-based teams. A bento of four cells in shared hairlines runs from rail to rail and ends the block. Each cell draws its own screen in greyscale (the week's rota, a customer's booking times, a shift swap, eight weeks of cover with the short weeks hatched) above a badge, a title, one line and a metric. Two cells span two columns on a desktop. The drawings are plain markup, hidden from assistive technology, and the text beside each says the same thing. It is built from Badge and Guides, with CSS transitions for the entrance. Every figure is example data.
FAQ
Are the screens real screenshots?
No. Each one is drawn from divs and spans in greyscale, so it follows your theme, never goes out of date and costs no image request.
Are the drawings accessible?
They are aria-hidden, since each is decoration for the cell's title, line and metric, which are real text and say the same thing.
How do the cells fit together?
On a desktop it is three columns and two of the cells take two, so both rows fill with no hole. On a tablet the first and last cells run across the row, and a phone has one column.
How do I change a drawing?
Each drawing is its own small component at the top of the file, fed by typed data such as ROTA, TIMES and COVER. The cover chart's heights are worked out from the hours, so the hatched gaps always match the numbers.