Block components

Wrap Markdown in a custom tag pair to build compound Mantine components whose panel bodies render as full Markdown.

component('Name', …) drops a single component inline, and its children is a plain string — Markdown inside it is not rendered. Block components solve the other case: a compound built from several Mantine components, given its own tag pair, wrapping a region of Markdown that renders normally.

The first one is the accordion:

{% accordion %}
{% accordionSection title="Section One" %}
## Markdown content

**This builds great!**
{% endAccordionSection %}
{% endAccordion %}

renders, live:

Each section’s title is the clickable control, and everything between the tags is its body — full Markdown (headings, lists, code, links), plus any component(...) call or even a nested block.

How it works

At build time the {% %} engine expands the block into nested Mantine islands (Accordion › Accordion.Item › Accordion.Control + Accordion.Panel) and lets the page’s single Markdown pass render each panel body. In the browser the island mounts like any other component.

Built-in block components

Each has its own reference page under Built-in Components:

• Accordion — collapsible sections with Markdown bodies.
• API fields — hand-authored parameter and response-field rows for an API reference that isn’t driven by an OpenAPI spec: a field’s name, type, required/deprecated badges, an optional default and request-location, beside a Markdown description ({% field %}).
• Card — content cards with icons, cover/background images, gradient/glass/stat variants, and whole-card links, arranged in a responsive grid ({% card %} / {% cardGrid %}).
• Code groups — several fenced code blocks shown as language/file tabs, each with its own copy button ({% codeGroup %}).
• Examples — side-by-side request/response panels for API docs: titled, syntax-highlighted code with per-block copy/download and a tab strip ({% requestExample %} / {% responseExample %}).
• Include — splice a shared Markdown partial into a page, varied by the page’s front matter.
• Map — an embedded OpenFreeMap / MapLibre map with a pin per location, placed by address (geocoded at build time) or by coordinates.
• Panel — a supplementary side panel that floats beside the content on a wide viewport and stacks below it on a narrow one ({% panel %}).
• Prompt — a copyable AI-prompt block with verbatim prompt text plus copy and “Open in ChatGPT / Claude / Cursor” actions ({% prompt %}).
• Tabs — tabbed panels with full Markdown bodies ({% tabs %} / {% tab %}).
• Tree — a nested file/folder explorer ({% tree %} / {% folder %} / {% file %}); click a file to open its source in a modal.
• Update — an inline release-note entry on a timeline rail: a version/date label beside its Markdown body ({% update %}).
• Visibility — show or hide a block depending on whether a human is reading the HTML page or an AI agent is reading its Markdown twin ({% visibility %}).

Defining a new block component is a small addition to the build tool — see AGENTS.md.