Banner

Installation

npx shadcn@latest add @blank/banner

Usage

import {
  Banner,
  BannerActions,
  BannerClose,
  BannerContent,
  BannerDescription,
  BannerTitle,
} from "@/components/ui/banner"

<Banner variant="brand">
  <BannerContent>
    <BannerTitle>Blank 3 is here</BannerTitle>
    <BannerDescription>New tokens, new components and a Pro tier.</BannerDescription>
  </BannerContent>
  <BannerClose />
</Banner>

Banner announces; Alert reports. A banner is about the product or the page — a release, a promotion, a preview build — so its variants are steps of emphasis rather than statuses. For "your card was declined", use an alert.

BannerClose hides the banner on its own. To remember the dismissal, control it with open and onOpenChange and persist the value wherever you keep user preferences. For a full-width strip at the top of a page, trade the radius and ring for a bottom hairline with className="rounded-none ring-0 border-b".

Examples

Variants

inverted flips the roles its children read, so a Button or a link inside it renders correctly on the dark strip — and on the light one in dark mode — without per-child overrides.