Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Drawn Bento Use Cases Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A use-cases block for React with Base UI, 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.

Does it work in a right-to-left layout?

The cells and text mirror. The cover chart keeps its own direction, since a time series reads the same way everywhere.

Are the metrics real?

No. Rotamoor is fictional and the metrics are example data.

  • Pro

    Share Bar Customer Segments

    Customers

    A framed 100% bar of a customer base in three segments, with one column per segment saying who they are, how big they are and what they use.

  • Pro

    Select Industries Served

    Customers

    A Select of six industries that drives one panel: the count of businesses, three use cases and the featured names, with the page holding its height.

  • Pro

    Snap Row Case Study Cards

    Customers

    A scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.

  • Pro

    Bento Grid Features

    Bentos

    A 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

    Struck Through Before After

    Comparisons

    Tabs of three workflows, each with a Before list where removed steps are struck through and an After list, a step count and one customer line.

  • Pro

    Matched Pairs Comparison

    Comparisons

    Five pains of bank reconciliation matched row by row with their fixes, an arrow between each pair and an improvement chip on every fix.

All 150 about blocks