Banner

Displaying important messages or announcements.

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

<Banner>
  <BannerContent align="center">
    Displaying important messages or announcements.
  </BannerContent>
</Banner>

Installation

To install the banner component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/banner

Usage

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

<Banner>
  <BannerContent>Message</BannerContent>
</Banner>

Examples

Default

Displaying important messages or announcements.

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

<Banner>
  <BannerContent align="start">
    Displaying important messages or announcements.
  </BannerContent>
</Banner>

Secondary

Secondary banner with muted background color.

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

<Banner variant="secondary">
  <BannerContent align="center">
    Secondary banner with muted background color.
  </BannerContent>
</Banner>

Outline

Outline banner with subtle border.

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

<Banner variant="outline">
  <BannerContent align="center">
    Outline banner with subtle border.
  </BannerContent>
</Banner>

Ghost

Ghost banner with transparent background.

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

<Banner variant="ghost">
  <BannerContent align="center">
    Ghost banner with transparent background.
  </BannerContent>
</Banner>

Float

Floating banner with rounded corners and margin.

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

<Banner frame="float">
  <BannerContent align="center">
    Floating banner with rounded corners and margin.
  </BannerContent>
</Banner>

Float Secondary

Floating secondary banner for prominent announcements.

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

<Banner frame="float" variant="secondary">
  <BannerContent align="center">
    Floating secondary banner for prominent announcements.
  </BannerContent>
</Banner>

Start

Content aligned to the start.

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

<Banner>
  <BannerContent align="start"> Content aligned to the start. </BannerContent>
</Banner>

End

Content aligned to the end.

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

<Banner>
  <BannerContent align="end"> Content aligned to the end. </BannerContent>
</Banner>