---
type: block
title: Banner
description: Announcement and promo bars that sit above or inside page content.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'banner-1' }}
---
import Banner1Block from "@/components/blocks/banner-1.astro"
---

<Banner1Block
  title="New block previews are live"
  description="Browse wider, content-first layouts that mirror real sections instead of isolated UI primitives."
  link={{ label: "Learn more", href: "#" }}
  closeLabel="Close"
  storageKey="banner-1"
/>
```

```astro live props={{ name: 'banner-2' }}
---
import Banner2Block from "@/components/blocks/banner-2.astro"
---

<Banner2Block
  title="Launching v0.9"
  description="Floating banners work well for launch moments, limited promos, and product announcements."
  buttons={[
    { label: "Get started", href: "#" },
    { label: "Learn more", href: "#" },
  ]}
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/banner-1 @fulldev/banner-2
```