React Aria banner blocks.

100 banner sections for notices on a website or in an app: top bars, alerts, cookie and consent prompts, countdowns, live status, pills, tickers and in-page callouts. The gallery sorts them into 14 groups: Top bars, Utility bars, Store bars, Tickers, Pills, Alerts, Live status, Metrics, Countdowns, Disclosures and tabs, Numbered lists, Choices and prompts, Split callouts, Stacked cards.

For a one-line release announcement use Top Bar Banner, or Dismissible Top Bar Banner when the message is long enough to need a More button. For cookies use Cookie Consent Multi-Action Banner. For a sale or event clock use Flash Sale Countdown Banner or Event Countdown Banner, for an incident notice Error Alert Banner, and for a news strip Scroll Marquee Banner.

Cookie Consent Multi-Action Banner is a labelled region with real buttons, never a dialog, so nothing traps focus. Accept all and Reject non-essential fold it away and leave focus on a line saying what was saved, but nothing is stored: saving the choice and loading or blocking your scripts is your code.

No, their figures are typed in the file. API Health Live Banner draws the last 30 minutes as bars from a typed LATENCY array, and the median and the slow minute in its sentence are worked out from that same array. Feed the array from your status API or monitoring and the bars and the sentence follow.

Top Bar Banner folds itself away, moves focus to what follows and says it is gone in a polite status, but it remembers nothing, so it returns on reload. When it is dismissed, write a flag to localStorage or a cookie and render nothing next time, ideally keyed by the announcement's id so a new announcement shows again.

The countdown blocks count down from a duration typed as a constant (STARTS_IN_MS in Event Countdown Banner, ENDS_IN_MS in Flash Sale Countdown Banner) measured from when the page loads, so the preview never goes stale. Replace it with your target date minus Date.now(), set in an effect so the server render does not disagree with the browser. At zero the event banner reads Live now and its button becomes Join the stream.

The banners render in the normal page flow between the page rails. To fix one to the screen, wrap it or give its root the position classes you want, such as fixed inset-x-4 bottom-4 z-50, and leave room for it in your layout. For the cookie prompt, put those classes on the card's outer element (the one with max-w-2xl) and remove the wrapper's vertical padding.

They already do. Scroll Marquee Banner has a Pause button and holds when a headline is hovered or focused, and Rotating Carousel Banner has a Pause button first in the card and pauses on hover and focus. Under prefers-reduced-motion nothing rotates and the marquee scrolls by hand. Keep the pause control when you change the content.

Most banners keep their link in a typed object at the top of the file, set to a placeholder "#": RELEASE.href in Top Bar Banner, SALE.href in Flash Sale Countdown Banner, and hrefRetry and hrefLogs in Error Alert Banner. Point them at your release notes, checkout or logs, or swap the anchor for your router's Link.

This page lists 100 of the category's 100 banner blocks for React on React Aria. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The banner blocks here are written on React Aria primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/aria/banner-alert-consent-check.json). The other bases are one picker away from /banner-block/aria.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on React Aria. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/aria/banner-alert-consent-check.json for Consent Check Alert Banner. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Consent Check Alert Banner brings Button, Checkbox, Guides and Label, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of banner block, led by top bars (13), alerts (10), stacked cards (10) and choices and prompts (9), and sort by popular or name. A good first look: Consent Check Alert Banner, Error Alert Banner and Icon Left Alert Banner. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a banner block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the bars and pills, what it shows and asks and offers kinds.

Open its page and use the full-screen viewer (/view/banner/aria/alert-consent-check) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each banner block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on React Aria, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the banner blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 banner blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a banner block, read it with get_block and install it on your React on React Aria stack.

Pass `category: "banner"` to search_blocks to search only the 100 banner blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "banner", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.