Banner
Add a banner to your site
Be careful, Fumadocs v99 has released
Using the
rainbow variantBe 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.
How is this guide?
Last updated on