shadcn.io is not affiliated with official shadcn/ui
Bento Sparkline Logos Block for React
A bento for a data warehouse in a card-in-card shell: four customers that each show the drop in slow queries as a figure and a falling trend line, beside one customer story set at the end.
Installation
Overview
A sparkline bento for React with Base UI. A muted shell with + marks on its corners holds a raised panel, and the cells inside the panel share their hairlines. Four of the cells are customers: a wordmark, an industry pill, the drop in slow queries since the customer moved ("−62%"), and under it a small trend line of the weekly count falling, drawn as an SVG path with a soft area under it. The fifth cell is a customer story set at the end of the grid, with the flagship's plate, a quote, who said it and a "Read the story" link. The block follows your theme: light on a light page, dark on a dark one, with the shell, the ring and the shadow lifting the panel in both. On a phone the story comes first and the four trend cells sit two by two beneath it. Built from Frame, Guides, Badge, Avatar and Button, with SVG for the lines and your theme's tokens for every colour. For infrastructure and analytics products whose proof is a number going the right way.
FAQ
How do I change the trend lines?
Each entry of TRENDS has a weekly array of numbers, oldest first. The sparkline scales the array to its own minimum and maximum, so any series fits and any length works. Keep the figure beside it (drop) in step with the series: it is typed by hand, not computed from the numbers.
Why is the story after the trend cells on a wide screen but first on a phone?
The story is first in the document, so it is the first thing a screen reader and a phone show. On a wide screen it is placed in the grid's third column, spanning both rows, so the four trend cells read first. The page keeps one reading order; only the grid places the story at the end.
How do I point Read the story at the full story?
The button is a link (href="#"): replace it with your case study's URL.
The button renders the link it's given with render, with nativeButton={false}.
Does the panel follow my theme?
Yes. The panel has no dark scope: its shell is a tinted muted layer, the panel is the card colour with a ring and a shadow, and the trend lines use the text colour. Nothing is a fixed colour, so every preset works in light and dark.
How do screen readers get the trend lines?
The sparklines are decoration (aria-hidden): the same information is in text, the drop in slow queries and its label. The figure is wrapped in bdi, so the sign stays in place in a right-to-left layout. The lines are drawn in the same direction in every layout, because time runs the same way in a chart.
Related
- Pro
A bento for an on-call alert router: one tall customer story with a big result, a quote and a link, beside four customers that each carry an industry pill and a retention figure, in cells that share their hairlines.
- Pro
A card-in-card showcase for an incident-response tool: one raised story panel with a big result at the start, and a numbered list of four more customers' results at the end.
- Pro
Metric Cards Bento Logos
BentosSix customer results for an invoice-financing product in two bands of cells, each with the customer's wordmark, a figure at display size, what it counts and a chip with the change since last year.
- Pro
Growth Line Metric Logos
MetricsA team count with a hand-drawn growth line over eight quarters and a last-quarter chip, in an inset frame for an energy-monitoring tool, with six customer wordmarks closing the panel.
- Pro
Featured Focal Diagram Logos
Flagship customerA hub-and-spokes diagram for a webhook-delivery tool: the flagship customer at the centre of an inset frame, three supporting customers on each side, and hairline curves running to each.
- 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.