Banner

Add a banner to your site

Be careful, Fumadocs v99 has released
Using the rainbow variant
Be careful, this banner can be closed

Usage

Put the element at the top of your root layout.

import { Banner } from 'fumadocs-ui/components/banner';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <html lang="en">
      <body>
        <Banner>Hello World</Banner>
        {children}
      </body>
    </html>
  );
}

Variant

Change the default variant.

import { Banner } from 'fumadocs-ui/components/banner';
 
<Banner variant="rainbow">Hello World</Banner>;

Change Layout

By default, the banner uses a style tag to modify Fumadocs layouts (e.g. reduce the sidebar height). You can disable it with:

import { Banner } from 'fumadocs-ui/components/banner';
 
<Banner changeLayout={false}>Hello World</Banner>;

Close

To allow users to close the banner, give the banner an ID.

import { Banner } from 'fumadocs-ui/components/banner';
 
<Banner id="hello-world">Hello World</Banner>;

The state will be automatically persisted.

Edit on GitHub

Last updated on

On this page