Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Image Content Split Banner Block for React Aria

A feature announcement for a collaboration workspace: a framed share sheet drawn in greyscale, with three members and their roles, beside a New badge, a heading, two sentences 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

A feature announcement for React with React Aria. Between the page's rails, a reverse split on a solid divider that meets the top rule: the copy sits at the end, with a New badge, "Share a doc with a role", two sentences and a link, and the figure sits at the start inside a hairline frame with + marks on its corners. The figure is the feature itself, a share sheet drawn in greyscale from the catalog's own parts: a "Share Q4 roadmap" title with a copy-link chip, and three members with initials, a role label and a switch. It is decoration, so it's hidden from assistive technology and inert. There is no placeholder box: the picture is made of interface. It's built from Avatar, Badge, Switch and Guides, with your theme's tokens for every colour. For product announcements, release notes and any news that is better shown than described.

FAQ

How does the figure end up at the start without breaking the reading order?

The copy is first in the page and the figure second, so screen readers and the Tab key meet the text first. From lg the figure takes the first grid cell with lg:col-start-1 lg:row-start-1, which moves it visually without touching the order. On a phone the copy comes first and the figure sits under it, below a rule.

Can people use the share sheet?

No: it's a picture. The figure is aria-hidden and inert, so nothing in it takes focus or is read out, and the role labels (Editor, Viewer) follow the switches because they come from the same data. The text beside it says what the feature does.

How do I change the people and roles?

Edit the MEMBERS list: a name, initials and whether the person is an editor. The role label under the name and the switch both come from that flag. The names are invented; use roles from your own product.

Why is the switch dark and not the primary colour?

Primary stays on the page's one main action. The switch uses the foreground tone when it's on, in light and dark themes, and the thumb flips to the background colour so it stays visible. React Aria's switch marks its on state with data-selected, so the classes use that and defaultSelected.

What happens in a right-to-left layout?

Everything mirrors: the figure moves to the right edge of the block, names and roles align to the start, the switches sit at the end of each row and the arrow on the link turns around.

How does it fit on a phone?

The copy comes first, then the frame under a rule. The sheet keeps its three rows and shrinks to the width; at 320 pixels the title row truncates its text and nothing scrolls sideways.

All 100 banner blocks