Banner

Installation

npx shadcn@latest add @fulldev/banner

Usage

import { Banner, BannerContainer } from "@/components/ui/banner"

<Banner>
  <BannerContainer>
    <p class="text-sm font-medium">Banner Title</p>
    <p class="text-sm opacity-90">Banner Description</p>
  </BannerContainer>
</Banner>

BannerContainer renders a close button by default. Set showClose={false} to hide it.

<Banner>
  <BannerContainer showClose={false}>
    <p class="text-sm font-medium">Banner Title</p>
    <p class="text-sm opacity-90">Banner Description</p>
  </BannerContainer>
</Banner>

Examples

---
import { Banner, BannerContainer } from "@/components/ui/banner"
---

<Banner>
  <BannerContainer>
    <p class="text-sm font-medium">New docs are live</p>
    <p class="text-sm opacity-90">
      Browse the latest component examples and installation guides.
    </p>
  </BannerContainer>
</Banner>

---
import { Banner, BannerContainer } from "@/components/ui/banner"
---

<Banner variant="floating" storageKey="docs-floating-banner">
  <BannerContainer>
    <p class="text-sm font-medium">Launch</p>
    <p class="text-sm opacity-90">New component docs are ready.</p>
  </BannerContainer>
</Banner>

Notes

• Use variant="default" for full-width announcements.
• Use variant="floating" for inset announcement bars.

API Reference

See the GitHub source code for more information on props.