Banner

Component 19

About

A dismissible banner for site-wide announcements and status messages, with stacking, priority queueing, and default/info/success/warning/destructive variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Banner to your project and fits it to your theme.

Code

How Banner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  Banner,
  BannerActions,
  BannerClose,
  BannerContent,
  BannerDescription,
  BannerIcon,
  BannerTitle,
} from "@/components/ui/banner";
import { Info } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/banner-utils/button";

export default function BannerDemo() {
  const [open, setOpen] = React.useState(true);

  return (
    <div className="flex w-full items-center justify-center p-6">
      <div className="w-full max-w-2xl overflow-hidden rounded-xl border bg-background shadow-sm">
        {open ? (
          <Banner open={open} onOpenChange={setOpen}>
            <BannerIcon>
              <Info />
            </BannerIcon>
            <BannerContent>
              <BannerTitle>New update available</BannerTitle>
              <BannerDescription>
                A new version of the app is available. Update now to get the
                latest features.
              </BannerDescription>
            </BannerContent>
            <BannerActions>
              <Button size="sm">Update now</Button>
              <BannerClose />
            </BannerActions>
          </Banner>
        ) : null}
        <div className="flex min-h-[150px] items-center justify-center px-6">
          {!open ? (
            <Button onClick={() => setOpen(true)}>Show banner</Button>
          ) : (
            <div className="flex flex-col items-center gap-1 text-center">
              <div className="h-2 w-24 rounded-full bg-muted" />
              <div className="mt-1 h-2 w-40 rounded-full bg-muted" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}