shadcn.io is not affiliated with official shadcn/ui
Sparkline Trend Metric Banner Block for Solid
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 Solid with Ark 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.