Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Centered Stacked Banner Block for React

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 Base UI. 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.

  • Pro

    Activity Proof Stacked Banner

    Stacked cards

    A centred social-proof card for a team workspace: a line saying who and how many teams upgraded this week, with the count rolling up, a sentence, a ringed avatar stack and a Shine Button.

  • Pro

    Guarantee Ribbon Banner

    Stacked cards

    A centred refund guarantee for a notebook app: a corner ribbon reading Secured, a shield, a heading, one sentence, the 30-day window drawn as a bar of thirty cells, and fine print under a rule.

  • Pro

    Two-Tone Split Banner

    Split callouts

    A seasonal offer on a split: a tinted half with 40% off in display type, and a plain half with the struck list price, the worked-out sale price per seat and a Shine Button.

  • Pro

    Flash Sale Countdown Banner

    Countdowns

    A flash-sale countdown for a lighting shop: the product with its struck regular price and sale price, a clock of hours, minutes and seconds in three cells, a Shine Button to claim the price, and a thin meter of how much stock is claimed.

  • Pro

    Pricing With Guarantee

    Proof and guarantees

    A free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.

  • Pro

    Trial Upgrade Multi-Action Banner

    Choices and prompts

    A trial prompt card for a video editor that sets what you have now beside what stays after the trial, in two columns, with upgrade, compare and remind-me-later actions.

All 100 banner blocks