Docs corpus recipe
Rendered
Goal
When a developer or agent lands on docs.mattermode.com, they need to (1) search the entire corpus instantly with Cmd+K, (2) scan endpoints grouped by lifecycle phase (Create / Manage / Exit / Platform), and (3) jump straight into the endpoint they need. The corpus landing is a single scannable grid — no marketing prose, no funnel — because developers are here to find an endpoint and read its reference.
Layout breakdown
Single-column body with three vertical regions inside the docs-shell topbar. Region map:
┌─ Topbar (global) ─────────────────────────────────────────────────┐
│ [Matter logo] Docs Brand API Changelog [Try] Cmd+K │
├─ Hero ────────────────────────────────────────────────────────────┤
│ Eyebrow: DEVELOPER DOCS │
│ DisplayHeading: Build with Matter. │
│ Pill search bar — "Search 247 endpoints…" (Cmd+K opens palette) │
├─ Lifecycle: Create ────────────────────────────────────────────────┤
│ Eyebrow: CREATE │
│ Grid of EndpointBadge cards — clamp 260px minmax, auto-fill │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ POST │ │ GET │ │ POST │ │
│ │ /enti… │ │ /entities/{id} │ /intents │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─ Lifecycle: Manage ────────────────────────────────────────────────┤
│ Eyebrow: MANAGE │
│ Grid of EndpointBadge cards (same shape) │
├─ Lifecycle: Exit ──────────────────────────────────────────────────┤
│ Eyebrow: EXIT │
│ Grid of EndpointBadge cards │
├─ Platform ────────────────────────────────────────────────────────┤
│ Eyebrow: PLATFORM │
│ Auth, webhooks, idempotency, versioning grid │
└────────────────────────────────────────────────────────────────────┘Card minimum width clamps at 260px so the grid never collapses to a one-up layout below the design-pad width.
Component manifest
| Region | Component | Why over alternatives |
|---|---|---|
| Search bar | Pill-shaped <input> + Cmd+K palette (Fumadocs <RootProvider search>) | Native to Fumadocs; auto-indexed; keyboard-first |
| Lifecycle eyebrow | Eyebrow | Section anchor — phase label |
| Endpoint card grid | Custom CSS Grid (auto-fill, minmax(260px, 1fr)) | Responsive grid without a grid component |
| Endpoint card | Card + EndpointBadge | Card frames; EndpointBadge labels the verb + path |
| Page title | DisplayHeading as="h1" size="hero" | Top of the page outline |
Responsive behaviour
| Breakpoint | Card grid | Search |
|---|---|---|
< 768px | 1 column (cards stretch full-width) | Search collapses to icon button; Cmd+K still works |
768–1023px | 2 columns | Full pill search |
1024–1439px | 3 columns | Full pill search with placeholder text |
≥ 1440px | 4 columns | Same |
States
| State | Trigger | Behaviour |
|---|---|---|
| Default | Page load | Grids hydrate; search bar focuses on Cmd+K |
| Cmd+K open | Cmd/Ctrl+K pressed | Fumadocs search palette overlay; backdrop blur |
| Search active | User typed into palette | Inline results group by lifecycle phase; arrow keys navigate |
| Empty results | No matches | "Nothing matches. Try entities or tokens." |
| Card hover | Mouse hover | Card border shifts to peach (--matter-peach 45%); subtle translate-Y |
Implementation
Source: apps/docs/app/(docs)/layout.tsx and the corpus page at apps/docs/app/(docs)/page.tsx. The grid is server-rendered from openapi.yaml operations; each op.tags[0] drives the lifecycle phase grouping.
Source
apps/docs/app/(docs)/layout.tsxRecipes
Full-bleed app-screen recipes — corpus, document detail, board meeting, equity dashboard, API reference.
Document detail
Single-document inspector — lifecycle bar, identity card, signature timeline, audit trail, and an action rail. The canonical document-detail surface in apps/app/(authenticated)/documents/[id]/.