Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Expandable Banner Block for React Aria

A fee-change notice for a rent-collection tool as a card in card: one header line that opens a sentence, three rows of facts (Now, From next renewal, Why) and a link.

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 expandable banner for React with React Aria, for a change that deserves one line first and the details on request. A muted shell with + marks on its corners wraps a raised panel whose header line, a receipt icon, "Card payment fees change at your next renewal" and a chevron, is the trigger of a disclosure that starts closed. Opened, it shows one sentence, three rows of facts on hairlines (Now, From next renewal, Why) and an underlined link to the fee schedule. The panel is separated from the header by a hairline, and the height opens on one grid row with a CSS transition. It's built from Collapsible, Data List and Guides, and it follows the theme, light or dark.

FAQ

How do I change the facts?

Edit FACTS at the top of the file: each entry is a label and a value. They are a real description list (a term and its detail), so a screen reader says "From next renewal, 1.9% per card payment". Values with a sign or a unit sit in a bdi element so a right-to-left layout keeps them in order.

How is the disclosure named for screen readers?

The trigger is a button inside the block's heading (h2), named by the header line; it reports expanded or collapsed, opens with Enter or Space, and its aria-controls points at the panel. The whole line is the target, not only the chevron.

How do I start it open?

Give Collapsible the defaultExpanded prop.

It starts closed because a banner should take one line until someone asks for more.

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 is it different from the collapsible details banner?

That one is an incident: a status dot, a badge and a grid of services. This one is a plain notice with a list of facts, in a card in card, with no status colour at all. Pick by what the details are: states of things, or the terms of a change.

How does it fit on a phone?

The header wraps to two lines when it must, and each fact stacks its label over its value. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the icon, the chevron and the arrow mirror.

All 100 banner blocks