Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Centered Stacked Banner Block for React Aria

A centred bonus offer for a music-learning app: a gift tile, a Limited time badge, a heading, a strip of fifteen month cells with the last three outlined as free, and a Shine Button.

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 bonus-offer banner for React with React Aria. A card in card, a muted shell with + marks on its corners around a raised panel, holds the heading "Get 3 bonus months on annual plans" with a gift tile beside it, a Limited time badge, and the offer drawn as a strip of fifteen month cells: twelve filled, then three outlined and labelled "3 free", with "12 months you pay for" under the filled ones. One Shine Button, "Upgrade now". The cells fill in one after another once on load. The strip is built from the data in the file (12 paid and 3 bonus), and there is no end date to go stale. It's built from Badge, Shine Button and Guides, with your theme's tokens for every colour. For annual-plan bonuses, referral months and any offer you can count in units.

FAQ

How do I change 12 + 3?

Change paid and bonus in OFFER: the cells, the heading's number and the labels follow. The grid classes are static, so change them too: grid-cols-15 becomes the new total and col-span-12 and col-span-3 the two groups.

How is the strip read by assistive technology?

The cells are decoration (aria-hidden). One visually hidden sentence says it in words: "12 months you pay for, then 3 months free." The heading and the badge are read as written.

What moves, and what happens with reduced motion?

The card fades up once and the fifteen cells fade in about 30 ms apart. With reduced motion everything is simply there.

What happens in a right-to-left layout?

The card stays centred. The strip is dir="ltr" on purpose, so it reads as a timeline from the first month to the last, with the free months at the end.

How does it fit on a phone?

The panel keeps its padding and the fifteen cells share the width, so they're slimmer but still fifteen. At 320 pixels nothing scrolls sideways.

All 100 banner blocks