# Docs — Page Template for React

> A three-column documentation page template: a grouped left sidebar with the current page highlighted, a center article (breadcrumb, Anneal-revealed title, lead, and rich prose with headings, lists, note/tip/warning callouts, inline code, copyable fenced code blocks, and a self-typing Telegraph terminal), and a right on-this-page rail that scroll-spies the active heading. The rail hides at large-and-below and the sidebar collapses to a mobile disclosure — every string a prop, one cool indigo accent knob.

- Page: https://crucibleui.com/components/templates/docs
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/docs
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/docs`.

## Props (`DocsTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand?` | `string` | `"Halyard"` | Product / project name in the header. |
| `logo?` | `React.ReactNode` | `the Halyard cleat` | Inline logo mark (24×24, currentColor). |
| `version?` | `string` | `"v2.4"` | Small version chip shown beside the brand. |
| `nav?` | `DocNavGroup[]` | — | Left-nav groups. |
| `breadcrumb?` | `string[]` | — | Breadcrumb trail above the title, coarse → fine. |
| `title?` | `string` | `"Quickstart"` | Page title (the `h1`). |
| `lead?` | `React.ReactNode` | — | Lead paragraph directly under the title. |
| `sections?` | `DocSection[]` | — | The article body, in reading order. Drives both the prose and the rail. |
| `prev?` | `DocPagerLink` | — | Previous-page pager link. |
| `next?` | `DocPagerLink` | — | Next-page pager link. |
| `tocLabel?` | `string` | `"On this page"` | Label above the on-this-page rail. |
| `footerNote?` | `React.ReactNode` | — | Footer note under the article. |
| `accent?` | `string` | `cool indigo "#818cf8"` | Signature hue, any CSS color. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"main">, "children" | "title">`.

## Usage example

```tsx
import { DocsTemplate } from "@/components/crucible/docs";

export default function DocsTemplateDemo() {
  return (
    <div className="relative isolate h-[620px] w-full overflow-y-auto overflow-x-hidden rounded-xl bg-neutral-950">
      <DocsTemplate className="min-h-full" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.