Layout

Docs layout component composing sidebar, breadcrumb, TOC, and pagination.

Installation

This component is part of the Doc block. Install the full block to use it:

CLI

npx shadcn@latest add "https://ui.xaclabs.dev/r/doc.json"

Usage

import { Layout } from "@/registry/blocks/doc/components/doc-layout"

View component source

doc-layout.tsx

tsx

import type * as React from "react"
import type { DocsSidebarGroup } from "@/content"
import { DocBreadcrumb } from "./doc-breadcrumb"
import { DocPagination } from "./doc-pagination"
import { DocSidebarLayout } from "./doc-sidebar"
import { DocToc } from "./doc-toc"

interface Heading {
  depth: number
  slug: string
  text: string
}

interface DocsLayoutProps {
  children: React.ReactNode
  title: string
  description?: string
  headings?: Heading[]
  sidebar: DocsSidebarGroup[]
  currentPath: string
}

export function DocsLayout({
  children,
  title,
  description,
  headings = [],
  sidebar,
  currentPath,
}: DocsLayoutProps) {
  return (
    <DocSidebarLayout config={sidebar} currentPath={currentPath}>
      <div className="flex flex-1 w-full gap-6">
        <div className="flex-1 min-w-0 mx-auto max-w-5xl px-6 md:px-8 pb-20 pt-6">
          <DocBreadcrumb currentPath={currentPath} />
          <div className="mt-6">
            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-8">
              {title}
            </h1>
            {description && (
              <p className="text-xl text-muted-foreground mb-8">
                {description}
              </p>
            )}
            {children}
          </div>
          <DocPagination currentPath={currentPath} config={sidebar} />
        </div>
        <aside className="hidden xl:block w-56 shrink-0 pt-6 pr-6">
          <DocToc headings={headings} />
        </aside>
      </div>
    </DocSidebarLayout>
  )
}

PreviousOverview NextSidebar