Banner

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.

Usage

Variant

Change Layout

Close

On this page