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, you can use it for displaying announcements.

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