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

    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.

    Accordion

    Add Accordions to your documentation

    Code Block (Dynamic)

    A codeblock that also highlights code

    Table of Contents

    Usage
    Variant
    Change Layout
    Close