shadcn.io is not affiliated with official shadcn/ui
Bento Sparkline Logos Block for Ark UI
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 Ark 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 takes asChild with the link inside, so it can be your router's link.
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.