SoarStarter TanStack
Components

Banner

Display a banner at the top of the page.

Usage

The Banner component displays a notification bar at the top of the page, useful for announcements and important messages.

import { Banner } from 'fumadocs-ui/components/banner';

// In your layout:
<Banner>
  This is an important announcement!
</Banner>
<Banner>
  <a href="/docs">New documentation available! Check it out →</a>
</Banner>

Props

PropTypeDefault
childrenReactNode-
idstring-
variant'normal' | 'rainbow''normal'
changeLayoutbooleantrue

On this page