shadcn.io is not affiliated with official shadcn/ui
Sparkline Trend Metric Banner Block for React
A revenue banner for a sales dashboard, as a card in card: the figure, a change badge and the comparison at the start, a 24 h and 7 d switch and a bar sparkline at the end, swapping in place.
Installation
Overview
A trend banner for React with Base UI, for a figure that comes with its shape. A muted shell with + marks on its corners wraps a raised panel: at the start the label, the revenue figure, a badge with the change on the previous period and a line saying what it is compared with; at the end a chip-style switch between 24 h and 7 d, and a sparkline of bars under it, the latest bar at full strength and the others softer. Switching swaps the figure, the badge and the bars in place and nothing changes height. It's built from Segment Group, Badge and Guides, with your theme's tokens for every colour. For revenue, traffic, signups and any dashboard figure that deserves a glance at its recent shape.
FAQ
Where do the figure and the change come from?
Both are worked out from the data. Each range in RANGES is a typed series (hourly dollars for a day, daily dollars for a week) and the total of the period before it. The figure is the series' sum, the badge is the sum against the previous total to one decimal, and the bar heights are each value as a share of the tallest, so the numbers always agree with the picture. Replace the series with your own and everything follows.
How does the switch work, and is it announced?
It is a Segment Group, a set of radio buttons styled as chips: arrow keys move between 24 h and 7 d and choosing one swaps the range. The figure, the badge and the comparison sit in a polite live region, so a screen reader reads the new figure when the range changes. The bars are replaced in the same box, which has a fixed height.
Is the sparkline accessible?
The bars form one image with a text alternative that says what they show and their range: "Revenue by hour, from a low of $690 to a high of $3,260". The bars themselves are decoration. The row is set left to right in every language, since time runs that way on a chart, while the labels and the figure follow the reading direction.
Why isn't the change green?
A rise is the usual case, so it is shown with an arrow and a sign, not a status colour, and the badge is outline style so it follows the theme. If the change is negative, swap the icon for TrendingDownIcon (the badge text is derived with a real minus sign already). Colour stays in reserve for the cases that are really a problem.
How does it look on a phone?
Below md the panel is one column: the figure and its badge first, then the switch, then the bars at the full width of the panel. The 24 bars stay readable at 320 pixels; the 7 bars of the weekly range are wider. From md the figure sits at the start and the switch and the bars at the end.
Related
- 4,291$38.4kPro
Dual Stat Metric Banner
MetricsA two-figure metric banner for a store dashboard: two cells split by a hairline, each with a label, a big figure, its change on last week, a thin bar to the weekly goal and that share in words.
- 12,847Pro
Single Stat Metric Banner
MetricsA one-figure metric banner for a product-analytics tool: a capacity ring in a framed figure, a big figure that rolls up from zero, the limit, this week's change and a link.
- Pro
Usage Quota Metric Banner
MetricsAn API-quota banner for an API platform on a tinted band: a bar with 80% and 95% ticks, the warning colour past the alert, and a hatched stretch to 100% for where the pace leads.
- Pro
Command Center Metric Board Features
Metrics and chartsA metrics console in a card in a card that follows your theme: six metric tiles with a value, a signed change and a sparkline are the tabs of one tablist, and choosing one opens a larger chart of its series in a strip below.
- Pro
Usage Profile Pricing
CalculatorsA monthly estimate for Light, Standard and Heavy usage of a speech-to-text API: choosing a profile rolls the total, resizes a tall stacked bar of where the bill comes from and updates each cost line.
- Pro
Metric Tiles Hero
Stats and live dataA compact left-aligned hero for an edge network with a live status pill, a Shine Button and an outline button at the end of the row, and four metric tiles below, each a ruled cell with a trend.