1# frontmatter
2
3`.mdx` files can start with a YAML frontmatter block. sublimated uses it for the `<title>`, meta description, and per-page render options.
4
5```mdx
6---
7title: SSH client for macOS
8description: connect to servers, browse remote files, chat with agents.
9---
10
11# your content starts here
12```
13
14## fields
15
16- `title` — sets `<title>` in the HTML head. defaults to "Untitled"
17- `description` — sets `<meta name="description">`. optional
18- `hydrate` — enable client-side hydration for interactive components. defaults off
19
20## hydration
21
22pure prose pages ship zero JavaScript. if you import a component that needs interactivity (tabs, accordions, charts that respond to clicks), set `hydrate: true`:
23
24```mdx
25---
26title: Docs
27hydrate: true
28---
29
30import { Tabs, Tab } from 'fumadocs-ui/components/tabs'
31
32<Tabs>
33 <Tab title="one">content</Tab>
34 <Tab title="two">content</Tab>
35</Tabs>
36```
37
38React attaches event handlers to the SSR output — no layout shift.
39
40## accessing frontmatter in layout
41
42frontmatter is not passed to `.sbl/layout.tsx` — it's read at the wrapper level to build the `<head>`. your layout only sees `{ children }`.