# DocsHub

> The docs home: a title, an optional search and topic chips, a larger "Start here" path, the sections as cards with page counts, and popular articles.

```ts
import { DocsHub } from "@sdxc/ui/docs";
```

Routes a reader into the docs by task. Every card is one link, start cards are larger
than section cards, and block headings sit one level under the title, so the outline
reads h1 → h2 → h3 with no scope around it and follows any `HeadingScope` that wraps it.

## Examples

```tsx
<DocsHub
	title="Documentation"
	labels={{ start: "Start here", sections: "Browse by topic" }}
	start={[{ title: "Quickstart", href: "/docs/quickstart", description: "Add your first monitor." }]}
	sections={[{ title: "Alerts", href: "/docs/alerts", description: "Who gets paged.", count: 6 }]}
	formatCount={(count) => `${count} pages`}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | The page title, rendered at the ambient heading level (`<h1>` with no scope around it). |
| `eyebrow?` | `string` | Small line above the title ("Documentation"). |
| `lead?` | `RemixNode` | One or two sentences under the title saying what the docs cover. |
| `search?` | `RemixNode` | The app's search field ("How can we help?"), drawn under the lead. |
| `start` | `StartItem[]` | The path a newcomer takes, most important first. |
| `topics?` | `Topic[]` | Chips under the search for the most asked-about tasks. |
| `sections` | `Section[]` |  |
| `popular?` | `Popular[]` |  |
| `labels` | `Labels` |  |
| `formatCount?` | `(count: number) => string` | Words a section's `count` ("12 pages"); a section's own `countLabel` wins over it. |

Also accepts everything in `Omit<TagProps<"div">, "title">`.