Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Banner
description: A full-width container for important messages or announcements.
---

## Installation

```bash
npx shadcn@latest add @fulldev/banner
```

## Usage

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

```astro
<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.

```astro
<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

```astro live props={{ name: 'banner' }}
---
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>
```

```astro live
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/banner) for more information on props.