Destructive-tinted alert bar with a faint red ground, red text and a bottom border, carrying a billing warning, an update link and dismiss. The tint deepens in dark mode.
import {
Banner,
BannerContent,
BannerDismiss,
BannerLink,
} from "@/components/banner/banner"
// The copy: change text here, not in the markup.
const COPY = {
news: "Your card on file expires this month.",
// Replaces news below the sm breakpoint, so the banner holds one line.
newsShort: "Your card expires this month.",
newsLink: "Update billing",
} as const
export default function MinimalBanner04() {
return (
<Banner className="border-b border-destructive/20 bg-destructive/10 text-destructive dark:bg-destructive/20">
<BannerContent>
<p>
<span className="sm:hidden">{COPY.newsShort}</span>
<span className="max-sm:hidden">{COPY.news}</span>
</p>
<BannerLink href="#">{COPY.newsLink}</BannerLink>
</BannerContent>
<BannerDismiss />
</Banner>
)
}
pnpm dlx shadcn add @01orbital/minimal-banner-04npx shadcn add @01orbital/minimal-banner-04yarn shadcn add @01orbital/minimal-banner-04bunx --bun shadcn add @01orbital/minimal-banner-04Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/banner/minimal-banner-04/index.tsx, as source you own and edit.
import MinimalBanner04 from "@/components/blocks/banner/minimal-banner-04"
export default function Example() {
return <MinimalBanner04 />
}Registry pieces it installs with it:
bannerArchived Workspace Banner
Sidebar-toned status bar with an archive icon, a message that wraps beside an outline button link to restore, and a dismiss control. Sits above an app shell.
Blue Glow Line Banner
Dark centered launch banner on a cool near-black ground with a blue GlowLine lighting its bottom edge, an arrow link and dismiss button. Shorter copy on phones.