# Documentation page

> A documentation page built from Facade UI sections: top navigation, side navigation, the article, an 'On this page' list and previous and next links. You supply one content object and the article body.

Facade UI item `docs-site` (block, template).
Docs page: https://facadeui.dev/components/docs-site · Registry JSON: https://facadeui.dev/r/docs-site.json

## Install

```bash
npx shadcn@latest add @facade/docs-site
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/docs-site.json`. The CLI also installs what it needs: @facade/container, @facade/eyebrow, @facade/footer, @facade/heading, @facade/nav-side, @facade/nav-top, @facade/prose, @facade/types, @facade/utils.

Files: `components/templates/docs-site.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/docs-site-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { DocsSite } from "@/components/templates/docs-site"

import { DOCS_GROUPS, FOOTER_GROUPS, NAV_ITEMS } from "./content"

export function Demo() {
  return (
    <div className="-m-6 sm:-m-10">
      <DocsSite
        currentPath="#installation"
        content={{
          brand: "Facade UI",
          nav: NAV_ITEMS,
          navActions: [{ label: "Get started", href: "#start" }],
          sidebar: { label: "Documentation", groups: DOCS_GROUPS },
          page: {
            eyebrow: "Getting started",
            title: "Installation",
            description: "Add the tokens once, then install sections one at a time.",
            lastUpdated: { dateTime: "2026-09-21", label: "21 September 2026" },
          },
          toc: {
            items: [
              { label: "Requirements", href: "#requirements" },
              {
                label: "Install the tokens",
                href: "#tokens",
                children: [{ label: "Import the stylesheet", href: "#import" }],
              },
              { label: "Add a section", href: "#section" },
            ],
          },
          pagination: {
            prev: { label: "Introduction", href: "#introduction" },
            next: { label: "Theming", href: "#theming" },
          },
          footer: { groups: FOOTER_GROUPS, copyright: "© 2026 Facade UI contributors" },
        }}
      >
        <h2 id="requirements">Requirements</h2>
        <ul>
          <li>React 19 and Tailwind CSS v4</li>
          <li>
            A project set up with <code>shadcn init</code>
          </li>
        </ul>
        <h2 id="tokens">Install the tokens</h2>
        <p>Every section reads the same tokens, so they come first.</p>
        <pre>
          <code>npx shadcn@latest add @facade/tokens</code>
        </pre>
        <h3 id="import">Import the stylesheet</h3>
        <p>
          Import the file after Tailwind in your global stylesheet, so the tokens can
          override its defaults.
        </p>
        <pre>
          <code>@import &quot;./facade-tokens.css&quot;;</code>
        </pre>
        <h2 id="section">Add a section</h2>
        <p>
          Install any section by name. Its dependencies come with it, and the source lands
          in your project.
        </p>
      </DocsSite>
    </div>
  )
}
```

## Props

### DocsSiteProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` (required) | `DocsSiteContent` |  |  |
| `children` (required) | `ReactNode` |  | The article body. Rendered markdown or JSX; `Prose` styles it. |
| `link` | `LinkComponent` |  |  |
| `currentPath` | `string` |  | Marks the current page in both navigations. |
| `banner` | `ReactNode` |  | Shown above the header. Usually a `Banner`. |