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

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

## Banner 1

```tsx title="Usage of @fulldev/banner-1 (react/gallery/blocks/banner-1.tsx, not installed)"
import { Banner1 } from "@/components/blocks/banner-1"

export default function Banner1Demo() {
  return (
    <>
      <Banner1
        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"
      />
    </>
  )
}
```

## Banner 2

```tsx title="Usage of @fulldev/banner-2 (react/gallery/blocks/banner-2.tsx, not installed)"
import { Banner2 } from "@/components/blocks/banner-2"

export default function Banner2Demo() {
  return (
    <>
      <Banner2
        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: "#" },
        ]}
      />
    </>
  )
}
```

## Install what this page shows

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