---
title: "Banner"
description: "An announcement bar above the layout, optionally dismissible."
url: https://docscn.dev/docs/components/banner
lastModified: 2026-10-09T09:13:37.000Z
---

# Banner (/docs/components/banner)

> An announcement bar above the layout, optionally dismissible.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/banner
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Put it above the layout, for example in `app/docs/layout.tsx`:

```tsx title="app/docs/layout.tsx"
import { Banner } from "@/components/docs/components/banner";

export default function Layout({ children }: LayoutProps<"/docs">) {
  return (
    <>
      <Banner id="v1">docscn v1 is out</Banner>
      <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
        {children}
      </DocsLayout>
    </>
  );
}
```

The banner sticks to the top of the page, and moves docscn's sidebar, navbars and table of contents down by its height. It does this by setting the `--docs-banner-height` variable, which you can use in your own sticky elements too: `top-(--docs-banner-height,0px)`.

With an `id`, the banner gets a close button and stays closed on later visits. Change the `id` to show a new announcement.

`variant="rainbow"` shows an animated gradient behind the text.

## Props [#props]

<TypeTable
  type="{
  id: {
    description: (
      <>
        Makes the banner dismissible, and remembers that in{&#x22; &#x22;}
        <code>{&#x22;localStorage&#x22;}</code>.
      </>
    ),
    type: &#x22;string&#x22;,
  },
  variant: {
    type: '&#x22;normal&#x22; | &#x22;rainbow&#x22;',
    default: '&#x22;normal&#x22;',
  },
  rainbowColors: {
    description: (
      <>
        The gradient's colours, with <code>{'variant=&#x22;rainbow&#x22;'}</code>.
      </>
    ),
    type: &#x22;string[]&#x22;,
  },
  height: {
    type: &#x22;string&#x22;,
    default: '&#x22;3rem&#x22;',
  },
  changeLayout: {
    description: <>Move docscn's layouts down by the banner's height.</>,
    type: &#x22;boolean&#x22;,
    default: &#x22;true&#x22;,
  },
}"
/>