shadcn.io is not affiliated with official shadcn/ui
Icon Left Alert Banner Block for React Aria
An icon-led callout for a CI service: a muted icon chip at the start, a heading, one sentence and a link, with a pair of bars comparing last week's build time with this week's.
Installation
Overview
An icon-led callout for React with React Aria, for good news that comes with a number. A plain muted chip holds the icon at the start, with a heading, one sentence and a link whose arrow mirrors in right-to-left layouts. At the end, two bars pair the median preview build time last week (78 seconds) with now (45 seconds): the second bar's width and the "42% faster" in the heading come from the two numbers, so changing them keeps the block honest. On phones the bars drop under the text. The block draws no lines of its own, only the page's rails and top rule from the Guides spine. It's built from Guides and Progress, with your theme's tokens for every colour. For performance wins, speed-ups, savings and any announcement that is easier to believe with a before and an after.
FAQ
How do I change the two numbers?
Edit BUILDS at the top of the file: each entry is a label and a number of seconds. The heading's percentage is worked out from the slowest and the fastest, and each bar's width is its time as a share of the slowest, rounded, so there is nothing else to keep in step. Two entries is the design; more would need the bars' labels to share a narrower column.
What do screen readers hear for the bars?
The bars are decorative: they sit in aria-hidden boxes. The list around them is named "Median preview build time" and each row is a plain label and value ("Last week", "78 s"), so the numbers are all in the text. The heading and the sentence say the same thing in words.
Why is the icon not coloured?
The chip is a neutral tint on purpose: this is a plain announcement, not an alert about something wrong. If you want a status colour, put text-success or text-info on the icon and keep the text in your theme's foreground colours; never fill the chip with a status colour.
Where does the link go?
See the build report is a plain inline link (href="#"): point it at your report or changelog. It is underlined so it reads as a link without colour, and its arrow mirrors in right-to-left layouts.