shadcn.io is not affiliated with official shadcn/ui
Error Alert Banner Block for React Aria
A failed-deploy callout for a deploy platform: a band with a failure icon, a heading naming the commit, a Shine Button to retry, and a framed excerpt that quotes the failing lines with the bad one marked.
Installation
Overview
A failed-deploy callout for React with React Aria, for the moment a build breaks and the first question is what exactly failed. The band is a failure icon, a heading that names the commit, two sentences (what broke, and that the last release is still live), a small Shine Button to retry and a link to the logs. On wide screens a framed excerpt sits at the end and quotes three lines of the failing file with a numbered gutter; the bad line carries a destructive edge, a faint tint and a wavy underline under the unknown name. On phones the excerpt drops under the text and scrolls sideways. The status colour stays on the icon and the marked line; the text follows your theme. The page's rails and top rule come from the Guides spine. It's built from Guides and Shine Button, with your theme's tokens for every colour. For build and deploy failures, failed imports, validation summaries and any error that is better with its evidence beside it.
FAQ
Why is it a section and not role alert?
The failure is on the page from the first paint, so it is a section named by its heading, a landmark people can find and skip. role="alert" only fires when content changes after load and interrupts whatever is being read. If your build fails while someone is on the page, put role="alert" on an element that is already in the page, empty, and fill it with the heading when the failure arrives.
How do I change the lines in the excerpt?
Edit EXCERPT at the top of the file: each line is its number, the code before the marked word, the marked word and the code after it. A line with a marked word gets the destructive edge, the tint and the wavy underline; a line without one is plain. The gutter numbers are drawn but neither selected, copied nor read out. Keep it to three or four lines: it is a quote, not a viewer.
Can a keyboard reach the part of a line that a phone cuts off?
Yes. The excerpt is a named list that scrolls sideways, and it takes focus with a visible ring, so the arrow keys scroll it. Code reads the same way in every layout: the excerpt keeps its own direction on purpose, even in a right-to-left page.
Is the red the only sign of the error?
No. The heading says the deploy failed, the sentence names the type error, and the marked line has a wavy underline and a gutter edge as well as the colour, so it reads the same without colour. The destructive token is only on the icon and on that line; the text stays in your theme's foreground colours.
Where do the retry button and the log link go?
Both are links (href="#"): point Retry build at your retry route and View build logs at the log page. Retry build is an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus.
It renders a link because it has an href.
How does it fit on a phone?
The icon, heading, sentences and both actions stack in one column; the excerpt follows under them at the full width of the page column, inside its + corner marks. At 320 pixels the page itself doesn't scroll sideways, only the excerpt does, and the commit hash is kept in reading order in a right-to-left layout.