Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Dual Stat Metric Banner Block for Ark UI

A 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.

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 two-figure metric banner for React with Ark UI, for a dashboard that wants two numbers side by side and nothing else. Two cells share the column between the page's solid rails, split by a hairline that runs up to the top rule with a + mark where they meet; on a phone the cells stack with a rule between them. Each cell holds a label, a big figure, an arrow with its change on last week, a thin bar filled to the share of the weekly goal, and that share in words. The bars are your theme's foreground; only a falling change carries the destructive colour, and only on its arrow. It's built from Guides and Progress, with your theme's tokens for every colour. For weekly digests, store and sales summaries, A/B result strips and any header that compares two figures at a glance.

FAQ

How do I change the two figures?

Edit METRICS at the top of the file: each entry has a label, the figure as text, the change on last week as a number (a positive one points up, a negative one down), the share of the goal reached and the goal as text. The share is typed, not computed from the figure, because the figure is already formatted ("$38.4k"); keep the two in step when you change one.

Why is only the falling change coloured?

A rise is the normal case and a fall is the exception, so colour is spent on the exception. The arrow for a fall uses the destructive colour; the number itself stays in the foreground colour, which keeps the text readable in every theme and means the change reads the same without colour, through the sign, the arrow's direction and the words "on last week". The bars never take a status colour, because nothing here has crossed a limit.

Is the bar read out to screen readers?

The bar is a picture of the sentence under it, so it is hidden from assistive technology and the words carry the information: "64% of the week's 6,700 goal". Each figure and its change are plain text, with the percentage and amounts in bdi elements so a right-to-left layout keeps the signs and units in order. The + and the real minus sign are part of the text, so the change is read as a number with a sign.

How does it look on a phone?

Below md the cells stack, one under the other, with a full-width rule and + marks between them instead of the vertical hairline. The figure and its change wrap onto two lines if they need to, and nothing scrolls sideways at 320 pixels.

Can I add a third figure?

Add an entry to METRICS and change md:grid-cols-2 to md:grid-cols-3. Every cell after the first draws its own hairline and + mark, so the divider follows on its own. Past three the figures get narrow; for a row of many, a stats block fits better.

All 100 banner blocks