LogoMkSaaS Docs
LogoMkSaaS Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
MDX
X (Twitter)
Components

Banner

Add a banner to your site

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>

Variant

Change the default variant.

import { 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:

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

Close

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

import { Banner }

The state will be automatically persisted.

Accordion

Add Accordions to your documentation

Code Block (Dynamic)

A codeblock that also highlights code

Table of Contents

Usage
Variant
Change Layout
Close
{children}
</body>
</html>
);
}
from
'fumadocs-ui/components/banner'
;
<Banner variant="rainbow">Hello World</Banner>;
from
'fumadocs-ui/components/banner'
;
<Banner changeLayout={false}>Hello World</Banner>;
from
'fumadocs-ui/components/banner'
;
<Banner id="hello-world">Hello World</Banner>;