Banner

A dismissible announcement bar above the header.

Banner from pzzadocs/ui renders a slim bar above the header for announcements such as a new release or a migration notice. Readers can dismiss it, and when an id is set the dismissal is remembered.

Usage#

The banner belongs in the root layout, before DocsLayout, so it spans the full width above the header:

app/layout.tsx

import { Banner, RootProvider } from "pzzadocs/ui";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <RootProvider theme={config.theme} search={config.search}>
          <Banner id="v1-release">
            PzzaDocs 1.0 is out. <a href="/getting-started/installation">Read the release notes</a>.
          </Banner>
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

While the banner is visible it sets the --pd-banner-height CSS variable, which the sticky header, sidebar, and TOC use to offset themselves, so nothing is hidden under it. Dismissing the banner resets the variable to 0px.

Persistence#

With an id, dismissal is stored in local storage under pd-banner:<id>, and the banner stays hidden on later visits. Change the id when the message changes so readers see the new one. Without an id, the banner reappears on every page load.

Variants#

variant="rainbow" adds an animated border for launches or major announcements. The default "normal" variant is a flat bar in the surface colour.

tsx

<Banner id="launch" variant="rainbow">
  Version 2 is live.
</Banner>

Props#

Name	Type	Default	Description
`id`	`string`	-	When set, dismissal is remembered in local storage under pd-banner:<id>.
`variant`	`"normal" \| "rainbow"`	`"normal"`	Visual style. rainbow adds an animated accent border.
`children`*	`ReactNode`	-	Banner content. Links and inline formatting work.
`className`	`string`	-	Extra class on the bar.

Not an MDX component

Banner is a layout component exported from pzzadocs/ui, so it is not available inside MDX by default. Render it in a layout, or register it through createSource(config, { components: { Banner } }) if you need it in content.