Docscn

RootProvider

Theme, search and framework providers for the root layout.

Installation

npx shadcn@latest add @docscn/root-provider

Usage

Wrap your app in RootProvider in the root layout, and add suppressHydrationWarning to <html> for next-themes:

app/layout.tsx
import { RootProvider } from "@/components/docs/provider/next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

It provides:

  • next-themes, with a D hotkey to switch between light and dark mode
  • search, with the default search dialog opened by ⌘ K or Ctrl K
  • shadcn/ui's TooltipProvider, which the sidebar uses
  • Base UI's DirectionProvider
  • Fumadocs Core's Next.js adapter, for links, images and routing

Props

PropTypeDescription
themeThemeProviderProps & { enabled?, hotKey? }Options for next-themes. enabled: false removes it; hotKey changes or (false) disables the D hotkey.
search{ enabled?, SearchDialog?, options?, links?, hotKey? }Search options. SearchDialog replaces the default dialog, and options passes props to it (e.g. { api: "/api/search" }).
dir"ltr" | "rtl"Text direction for Base UI components. Defaults to "ltr".
components{ Link?, Image? }Replace the Next.js Link and Image used by docscn components.

useTheme is re-exported from @/components/docs/provider/base.

Compatibility

The status of every Fumadocs UI module in docscn.

DocsLayout

The docs layout with a sidebar, built on the shadcn/ui sidebar.