Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Collapsible Details Banner Block for Radix UI

An incident notice for a status-page product as a disclosure: one summary line with an Investigating badge, and open it explains the incident and lists the four affected services.

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

An incident banner for React with Radix UI, for bad news that most visitors only need a line of. A card sits between the page's solid rails with one summary line: a warning dot, "Elevated error rates in US-East", an Investigating badge and a chevron, and the whole line is the trigger. Opened, it says how long ago the incident started, counted from the visit, explains what is affected, and lists the four services on shared hairlines, each with its state in words as well as a dot, then links to the status page. The height opens on one grid row with a CSS transition. It's built from Collapsible, Status, Badge, Relative Time Text and Guides, and it follows the theme.

FAQ

How do I change the services?

Edit SERVICES at the top of the file: each entry is a name and degraded, true for a warning dot and "Degraded", false for a foreground dot and "Operational". The state is always written as well as drawn, so it doesn't depend on colour. A list of four fills the two-by-two grid; for more, let it grow rows, and keep the open banner under about 430 pixels.

How does it say how long ago the incident started?

STARTED_AGO_MS sets it as a duration, and the block adds it to the moment the page first runs in the browser, so it says "32 minutes ago" when you arrive and keeps counting, and it never shows a calendar date that goes stale. Until the browser runs, the server's page says "Started recently". In your product, pass the incident's real start time to Relative Time Text instead.

How is the disclosure named for screen readers?

The trigger is a button inside the block's heading (h2), so the heading lists the banner among the page's headings and the button says whether it is expanded. Its name is the summary line and the badge: "Elevated error rates in US-East Investigating". It opens with Enter or Space, and its aria-controls points at the panel.

How do I start it open?

Give Collapsible the defaultOpen prop.

The poster shows it closed, which is how a banner should arrive; open it by default only on the incident's own page.

What moves, and what happens with reduced motion?

The card fades up once on load, the panel's height eases open and the chevron turns over, all with CSS. With reduced motion turned on the panel opens at once and nothing animates.

How does it fit on a phone?

The summary wraps to two lines when it must and the services stay two by two. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the dot, the badge, the chevron and the arrow mirror.

All 100 banner blocks