Banner

Dashboards 277

About

Place the element at the top of your root layout to display announcements. By default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. You can disable this feature with: To enable users to close the banner, assign it an ID. The state will be automatically saved.

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

import Image from "next/image"
import { Banner } from "@/components/ui/banner"

function RainbowBannerDemo() {
  return (
    <div className="relative w-full">
      <Banner
        message="🎉 New features coming soon!"
        height="2rem"
        variant="rainbow"
        className="mb-4"
      />

      <div className="relative w-full aspect-[16/9] rounded-lg overflow-hidden">
        <Image
          src="https://cdn.21st.dev/assets/mirror/86/867a175524a0966eb144327b962159fa1ac4e1822b0cd857759b754306f3b0d4.png"
          alt="Application screenshot"
          fill
          className="object-cover"
          priority
        />
      </div>
    </div>
  )
}


function BannerDemo() {
  return (
    <div className="relative w-full">
      <Banner
        message="🎉 New features coming soon!"
        height="2rem"
        className="mb-4"
      />

      <div className="relative w-full aspect-[16/9] rounded-lg overflow-hidden">
        <Image
          src="https://cdn.21st.dev/assets/mirror/86/867a175524a0966eb144327b962159fa1ac4e1822b0cd857759b754306f3b0d4.png"
          alt="Application screenshot"
          fill
          className="object-cover"
          priority
        />
      </div>
    </div>
  )
}

export { RainbowBannerDemo, BannerDemo }