# Meridian — Tailwind Documentation Template

> For a team documenting an API: a Tailwind documentation template with guides, a reference, SDKs in three languages and a filterable changelog. 8 routes.

- Price: $34, one-time
- License: Standard
- Version: 2.6.3
- Category: Documentation
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15, React >=19, Tailwind CSS >=4
- Dependencies: `lucide-react`

## What's inside

- 8 pages
- 36 components
- 78 design tokens plus 78 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `docs-hero`, `quickstart-panel`, `support-strip`, `site-footer` |
| `/guides` | `site-header`, `guides-shell`, `recovery-sequence`, `site-footer` |
| `/api` | `site-header`, `api-reference`, `site-footer` |
| `/sdks` | `site-header`, `sdk-shell`, `site-footer` |
| `/changelog` | `site-header`, `changelog-log`, `site-footer` |
| `/support` | `site-header`, `support-desk`, `site-footer` |
| `/legal` | `site-header`, `legal-desk`, `site-footer` |
| `/components` | `site-header`, `docs-hero`, `quickstart-panel`, `guides-shell`, `recovery-sequence`, `api-reference`, `sdk-shell`, `changelog-log`, `support-desk`, `legal-desk`, `support-strip`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Sticky docs header: wordmark, four current-aware section links, search, version switcher, mode toggle, API-keys link and a native mobile disclosure with Escape dismissal and focus return |
| `docs-hero` | The indexed masthead (archetype A9): typed route/showcase heading root, version marker, headline, two actions, the first live request overhanging the container, and an eleven-entry index covering every route with the reader's own position marked |
| `quickstart-panel` | Four numbered steps at display size beside one shell script that runs the whole create-publish-lease-ack loop |
| `guides-shell` | Three-pane guide with a typed heading root: grouped sidebar, measure-capped article with the reading edge, optional recovery slot and matching conditional outline, code blocks, callouts and the Wire diagram figure |
| `recovery-sequence` | Six-step static endpoint-id recipe for a timed-out publish, idempotent retry, first lease and expiry, lease_expired conflict, safe redelivery and ack; the canonical showcase is full while read-only and version-mismatch panes use the typed compact six-step summary |
| `api-reference` | Three-pane reference: ten endpoint blocks headed by the request line, parameter tables, JSON response samples, the publish request builder, a scope table, an error-code table and rate limits |
| `sdk-shell` | Three-pane SDK page: what every client handles as a capability table, then the same consumer loop in TypeScript, Python and Go behind one keyboard-driven tab strip, and the OpenAPI spec excerpt |
| `changelog-log` | Three-pane release log: seven dated releases newest first, filtered by tag, tagged added/changed/fixed/deprecated/breaking, with the endpoints each release added rendered as request lines and one migration sample |
| `support-desk` | Three-pane support page: what support answers, a required-fields table and a worked report, incident triage, and how to ask for a limit raise |
| `legal-desk` | Three-pane legal page: the agreement, acceptable use, a five-row retention table and the availability targets, all policy and no attestation |
| `support-strip` | Closing panel: support promise, keyboard shortcut reminder and two real actions, the support page first |
| `site-footer` | Four link columns marking what ships and what does not, product blurb, build string and an explicitly labelled example status line |
| `ui/container` | The content column at two widths: 7xl for reading surfaces, 5xl for the landing quickstart |
| `ui/logo` | Wordmark: the hand-drawn meridian sphere plus the lowercase monospace product name |
| `ui/button` | Button in two shapes: the link-shaped action in primary/secondary/ghost at two sizes, and a real control carrying disabled and pending with aria-busy so a submit cannot fire twice, plus DisabledAction, the visibly unimplemented destination the placeholder convention uses |
| `ui/badge` | Monospace pill with neutral, strong and caution appearance variants for HTTP methods, status codes and version tags |
| `ui/request-line` | The theme's atom: method, path, auth scope and response status in one dense mono row, heading every code sample and every endpoint block |
| `ui/kbd` | A real <kbd> chip, one key per chip, plus the platform-aware modifier key |
| `ui/code-block` | Framed code sample: request-line chrome, the copy control and its refusal band, and dependency-free four-role highlighting across six language families |
| `ui/field` | The form family: Field, TextField, TextareaField and fieldControlClasses, with label, optional marker, hint, read-only and disabled grounds, and an invalid state that follows the callout's rule - a two-pixel ink rule, a glyph and a sentence, never a hue |
| `ui/callout` | Note, tip and warning appearance variants marked by border weight, a glyph and a word, never by a coloured stripe |
| `ui/params-table` | Two-column parameter table: name, type, default and a required chip on the left, description on the right |
| `ui/docs-layout` | The three-pane frame: full-height sidebar rule, article reading edge, outline rail, and a native sidebar disclosure below lg with Escape dismissal and focus return |
| `ui/outline-rail` | The on-this-page outline with a brass current marker driven by an IntersectionObserver |
| `ui/version-switcher` | The documentation version, the ones it is not, and where the changes are — the current line marked in brass and by aria-current, the unshipped lines marked as unshipped rather than linked somewhere else |
| `ui/section-heading` | Eyebrow, h2 at d1 and a measure-capped lede, on the one shared type scale |
| `ui/wire-figure` | Renders canonical Wire Diagram JSON (src/assets/delivery-pipeline.wire.json) as a token-styled ladder: twelve node kinds, declared branches, tone as border weight rather than hue, and explicit edges drawn as labelled return lines |
| `ui/log-filter` | Client-side tag filter over server-rendered log entries, with per-tag counts and a live-announced result line |
| `ui/request-builder` | Assembles a real curl command from an endpoint's own parameters and hands it to the copy control; it never sends a request or invents a response |
| `ui/mode-toggle` | Light/dark switch that toggles the nearest theme wrapper, persists standalone, and never overrules a mode the host has already set |
| `ui/dialog` | The modal panel a docs product borrows rather than owns: hairline card on the one shadow, header rule, scrolling body, footer band, three measures, and severity carried by a 2px ink rule instead of a colour this theme does not have |
| `ui/command-palette` | Keyboard-first search over a curated forty-two-entry index: the platform modifier plus K opens it from any route, the results are a real listbox whose ends do not wrap, Enter opens the marked row and Escape returns focus to the chip that raised it |
| `ui/tabs` | One selection the whole SDK page follows, with the panels carrying the route's own anchor ids so a hash naming a language selects it |
| `ui/copy-button` | The copy control on every code panel: a glyph swap for the confirmation, a refusal that stays until the reader tries again, a counted live region so a second refusal is heard, and focus returned after the browser's permission prompt |
| `ui/popover` | The anchored non-modal surface behind the version list: it flips above its control when the viewport runs out, closes on Escape, on a press outside and on a Tab that leaves, and returns focus only when a key asked for it |
| `ui/accordion-disclosure` | Native header and documentation-sidebar disclosures with Meridian recipes, plus Escape dismissal and focus return from the vendored React part |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#f3f7fe` | `#0a0e15` |
| `--foreground` | `#0f141c` | `#e5ecf7` |
| `--card` | `#ffffff` | `#10161f` |
| `--card-foreground` | `#0f141c` | `#e5ecf7` |
| `--primary` | `#1a47c7` | `#76a2fe` |
| `--primary-hover` | `#0b32b3` | `#658fe9` |
| `--primary-active` | `#021b9e` | `#537cd5` |
| `--primary-foreground` | `#ffffff` | `#060b14` |
| `--secondary` | `#e2eaf6` | `#1a2331` |
| `--secondary-foreground` | `#232c3b` | `#c5cedc` |
| `--muted` | `#ebf0f8` | `#131a24` |
| `--muted-foreground` | `#58616f` | `#94a1b3` |
| `--accent` | `#8a5a0f` | `#ecb460` |
| `--accent-foreground` | `#ffffff` | `#10161f` |
| `--border` | `#ccd4e2` | `#2b3646` |
| `--ring` | `#1a47c7` | `#76a2fe` |
| `--surface-tint` | `#edf4fd` | `#1b2026` |
| `--shadow-color` | `#0d1624` | `#010611` |
| `--scrim` | `#0f141ca6` | `#060b14cc` |
| `--mask-ink` | `#0f141c30` | `#e5ecf729` |
| `--radius` | `0.375rem` | `0.375rem` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `var(--text-d1--line-height)` | `var(--text-d1--line-height)` |
| `--tracking-d1` | `var(--text-d1--letter-spacing)` | `var(--text-d1--letter-spacing)` |
| `--text-d1--line-height` | `1.25` | `1.25` |
| `--text-d1--letter-spacing` | `-0.01em` | `-0.01em` |
| `--text-d2` | `1.875rem` | `1.875rem` |
| `--leading-d2` | `var(--text-d2--line-height)` | `var(--text-d2--line-height)` |
| `--tracking-d2` | `var(--text-d2--letter-spacing)` | `var(--text-d2--letter-spacing)` |
| `--text-d2--line-height` | `1.2` | `1.2` |
| `--text-d2--letter-spacing` | `-0.01em` | `-0.01em` |
| `--text-d3` | `clamp(1.875rem, 1.604rem + 1.156vw, 2.34375rem)` | `clamp(1.875rem, 1.604rem + 1.156vw, 2.34375rem)` |
| `--leading-d3` | `var(--text-d3--line-height)` | `var(--text-d3--line-height)` |
| `--tracking-d3` | `var(--text-d3--letter-spacing)` | `var(--text-d3--letter-spacing)` |
| `--text-d3--line-height` | `1.15` | `1.15` |
| `--text-d3--letter-spacing` | `-0.01em` | `-0.01em` |
| `--text-d4` | `clamp(2.34375rem, 2.005rem + 1.44vw, 2.9296875rem)` | `clamp(2.34375rem, 2.005rem + 1.44vw, 2.9296875rem)` |
| `--leading-d4` | `var(--text-d4--line-height)` | `var(--text-d4--line-height)` |
| `--tracking-d4` | `var(--text-d4--letter-spacing)` | `var(--text-d4--letter-spacing)` |
| `--text-d4--line-height` | `1.05` | `1.05` |
| `--text-d4--letter-spacing` | `-0.025em` | `-0.025em` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `var(--text-lead--line-height)` | `var(--text-lead--line-height)` |
| `--tracking-lead` | `0em` | `0em` |
| `--text-lead--line-height` | `1.6` | `1.6` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `var(--text-body--line-height)` | `var(--text-body--line-height)` |
| `--tracking-body` | `0em` | `0em` |
| `--text-body--line-height` | `1.55` | `1.55` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `var(--text-small--line-height)` | `var(--text-small--line-height)` |
| `--tracking-small` | `0em` | `0em` |
| `--text-small--line-height` | `1.45` | `1.45` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `var(--text-caption--line-height)` | `var(--text-caption--line-height)` |
| `--tracking-caption` | `0em` | `0em` |
| `--text-caption--line-height` | `1.4` | `1.4` |
| `--text-label` | `0.75rem` | `0.75rem` |
| `--leading-label` | `var(--text-label--line-height)` | `var(--text-label--line-height)` |
| `--tracking-label` | `var(--text-label--letter-spacing)` | `var(--text-label--letter-spacing)` |
| `--text-label--line-height` | `1.4` | `1.4` |
| `--text-label--letter-spacing` | `0.08em` | `0.08em` |
| `--text-read` | `1rem` | `1rem` |
| `--leading-read` | `var(--text-read--line-height)` | `var(--text-read--line-height)` |
| `--tracking-read` | `0em` | `0em` |
| `--text-read--line-height` | `1.75` | `1.75` |
| `--text-scan` | `1rem` | `1rem` |
| `--leading-scan` | `var(--text-scan--line-height)` | `var(--text-scan--line-height)` |
| `--tracking-scan` | `0em` | `0em` |
| `--text-scan--line-height` | `1.75` | `1.75` |
| `--text-code` | `0.75rem` | `0.75rem` |
| `--leading-code` | `var(--text-code--line-height)` | `var(--text-code--line-height)` |
| `--tracking-code` | `0em` | `0em` |
| `--text-code--line-height` | `1.6` | `1.6` |
| `--display-weight` | `600` | `500` |
| `--font-text` | `var(--font-source-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | `var(--font-source-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-source-code), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace` | `var(--font-source-code), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/meridian.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/meridian](https://tailthemes.com/api/download/meridian)

## Links

- Product page: [https://tailthemes.com/themes/meridian](https://tailthemes.com/themes/meridian)
- Live preview: [https://tailthemes.com/preview/meridian](https://tailthemes.com/preview/meridian)
- Docs: [https://tailthemes.com/docs/meridian](https://tailthemes.com/docs/meridian)
- Manifest JSON: [https://tailthemes.com/api/themes/meridian](https://tailthemes.com/api/themes/meridian)
- Registry item: [https://tailthemes.com/r/meridian.json](https://tailthemes.com/r/meridian.json)