Docscn

DocsLayout

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

Installation

npx shadcn@latest add @docscn/docs-layout

Usage

app/docs/layout.tsx
import { DocsLayout } from "@/components/docs/layouts/docs";
import { baseOptions } from "@/lib/layout.shared";
import { source } from "@/lib/source";

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

DocsLayout renders the shadcn/ui SidebarProvider, a Sidebar with the page tree, and a SidebarInset for the page. On mobile, the sidebar opens as a sheet from a navbar with the title, search and a sidebar trigger. On desktop, the sidebar can be collapsed (⌘ B), leaving a small panel to reopen it.

Because it uses the shadcn/ui sidebar, useSidebar() from @/components/ui/sidebar works anywhere inside it.

Props

PropTypeDescription
treePageTree.RootThe page tree, usually source.getPageTree().
navNavOptionstitle, url (defaults to /), enabled, children (extra navbar content) and transparentMode.
linksLinkItemType[]Links shown in the sidebar. Icon links show in the sidebar footer. on: "nav" | "menu" | "all" restricts where a link shows.
githubUrlstringAdds a GitHub icon link.
sidebarSidebarOptionsSee below.
tabsLayoutTab[] | GetLayoutTabsOptions | falseLayout tabs, by default one per root folder ("root": true in meta.json).
tabMode"auto" | "top"Show tabs as a dropdown in the sidebar (auto), or above the page on desktop (top).
themeSwitch{ enabled?, mode? }The theme switch in the sidebar footer. mode: "light-dark-system" adds a system option.
searchToggle{ enabled?, sm?, full? }The search triggers, with props for the small and full variants.
containerPropsComponentProps<"main">Props for the SidebarInset that wraps the page.
OptionTypeDescription
enabledbooleanShow the sidebar. Defaults to true.
banner, footerReactNodeContent above the page tree, and in the sidebar footer.
collapsiblebooleanAllow collapsing the sidebar on desktop. Defaults to true.
defaultOpenLevelnumberOpen folders up to this depth by default. Defaults to 0.
prefetchbooleanPrefetch pages linked from the sidebar.
defaultOpenbooleanWhether the desktop sidebar starts open. Read shadcn/ui's sidebar_state cookie and pass it to keep the state across page loads.
open, onOpenChangeboolean, (open) => voidControl the desktop open state.
components{ Item?, Folder?, Separator? }Replace how page tree nodes render.

The rest are passed to the shadcn/ui Sidebar (e.g. variant, side, className).

RootProvider

Theme, search and framework providers for the root layout.

DocsPage

A docs page with a table of contents, breadcrumb and previous/next links.