shadcn.io is not affiliated with official shadcn/ui
Info Alert Banner Block for Radix UI
An in-page info callout for an invoicing app: a card in card with an info icon, a heading, two sentences about a change coming next month, a Shine Button link and a dismiss button that folds the block away.
Installation
Overview
An info callout for React with Radix UI, for a change people should hear about before it happens. A muted shell with + marks on its corners holds a raised panel: an info icon, a short heading, two sentences on what changes and when, one Shine Button link to read more, and a ghost dismiss button. The status colour stays on the icon and on one hairline along the panel's top edge; the panel, the text and the button follow your theme, light or dark. Dismissing folds the whole block away with a CSS height transition, down to its top rule, and keeps the keyboard where it was. The page's rails and top rule come from the Guides spine, so the callout lines up between a hero and the next section. It's built from Guides, Shine Button and Button, with your theme's tokens for every colour. For deprecations, format changes, policy updates and any notice that should inform without competing with the page.
FAQ
Why is it a labelled section and not an alert?
The notice is part of the page from the first paint, so it is a section named by its heading: screen readers list it with the page's regions, and people can jump to it or past it. A live region (role="status") only announces content that changes after load, so it would say nothing here, and role="alert" interrupts whatever is being read, which suits an error, not a heads-up. If your notice appears later, after a save or a sync, put role="status" on an element that is in the page from the start and fill its text when the notice arrives.
What happens when someone dismisses it?
The block's rows shrink from their full height to nothing while the card fades, in 300 ms, and it ends at its top rule, so the next section's rule takes its place. Once folded, the card is inert and hidden from screen readers, and the section drops its name. The dismiss button can't keep the focus, so focus moves to a short visually hidden line at the same spot, "Export notice dismissed.", which screen readers read out, and the next Tab carries on from there. With reduced motion the block closes at once.
How do I keep it dismissed after a reload?
The block forgets on purpose, so the preview always shows it. To remember, write a key for this notice (tallyfern:tax-columns-notice) to localStorage in the dismiss handler, and read it back after the first render, never during it, so the server and the browser agree.
Read it in a useEffect and set hidden when it's there.
Name the key after the notice, so the next notice shows again.
How do I turn it into a warning, an error or a success?
Swap the icon (TriangleAlertIcon, CircleAlertIcon, CircleCheckIcon) and the two status classes: text-info on the icon and via-info on the top hairline become text-warning, text-destructive or text-success, and their via- pair. Keep the heading and the sentences in the foreground colours: the icon's shape and the words carry the meaning, so it reads the same without colour, and no status colour ever fills a surface.
Where does the button go?
See the new columns is a link (href="#"): point it at your changelog or the help article. It's 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 takes asChild with the link inside, so it can be your router's link.
How does it fit on a phone?
Below md the icon, the heading and the dismiss button share the first row, with the dismiss button in the top end corner; the sentences and the button take the panel's full width under them. From md it's one row: the copy at the start, the button and the dismiss button at the end. At 320 pixels nothing scrolls sideways, and in a right-to-left layout everything mirrors.