Collapsible Banner

Component 26

About

A dismissible notice banner that folds its details away with a spring animation, with a controllable open/folded/dismissed state and an accessible expand/collapse toggle.

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

Code

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

Usage.tsx

"use client";

import { CollapsibleBanner } from "@/components/ui/collapsible-banner";

export default function CollapsibleBannerDemo() {
  return (
    <div className="mx-auto w-full max-w-[420px] space-y-2">
      <CollapsibleBanner
        dismissible={false}
        title="Payments are degraded"
        description="Charges are queued and settle automatically once the provider recovers. Nothing is lost."
      />

      <CollapsibleBanner
        title="Storage is nearly full"
        description="This workspace is using 94% of its 10 GB."
        action={
          <button
            type="button"
            className="h-7 rounded-[7px] border border-stone-200 bg-stone-50 px-2.5 text-[11.5px] font-medium text-stone-700 transition-colors duration-150 hover:bg-stone-100 dark:border-white/[0.16] dark:bg-white/[0.06] dark:text-stone-100 dark:hover:bg-white/10"
          >
            Upgrade plan
          </button>
        }
      />
    </div>
  );
}