Banner

InstallationCopy Anchor Link

npx shadcn@latest add @docscn/banner

UsageCopy Anchor Link

Put it above the layout, for example in app/docs/layout.tsx:

import { Banner } from "@/components/docs/components/banner";

export default function Layout({ children }: LayoutProps<"/docs">) {
  return (
    <>
      <Banner id="v1">docscn v1 is out</Banner>
      <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
        {children}
      </DocsLayout>
    </>
  );
}

The banner sticks to the top of the page, and moves docscn's sidebar, navbars and table of contents down by its height. It does this by setting the --docs-banner-height variable, which you can use in your own sticky elements too: top-(--docs-banner-height,0px).

With an id, the banner gets a close button and stays closed on later visits. Change the id to show a new announcement.

variant="rainbow" shows an animated gradient behind the text.

PropsCopy Anchor Link