# Block components

`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**:


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

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


renders, live:

Section One

## Markdown content

**This builds great!**


Section Two

## More Markdown content

- This bulleted list actually renders!
- See?



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](/components/data-display/accordion/) — collapsible sections with Markdown bodies.
- [API fields](/components/extras/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](/components/data-display/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](/components/extras/codegroup/) — several fenced code blocks shown as language/file tabs, each with its own copy button (`{% codeGroup %}`).
- [Examples](/components/extras/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](/components/extras/include/) — splice a shared Markdown partial into a page, varied by the page's front matter.
- [Map](/components/extras/map/) — an embedded OpenFreeMap / MapLibre map with a pin per location, placed by address (geocoded at build time) or by coordinates.
- [Panel](/components/extras/panel/) — a supplementary side panel that floats beside the content on a wide viewport and stacks below it on a narrow one (`{% panel %}`).
- [Prompt](/components/extras/prompt/) — a copyable AI-prompt block with verbatim prompt text plus copy and “Open in ChatGPT / Claude / Cursor” actions (`{% prompt %}`).
- [Tabs](/components/navigation/tabs/) — tabbed panels with full Markdown bodies (`{% tabs %}` / `{% tab %}`).
- [Tree](/components/navigation/tree/) — a nested file/folder explorer (`{% tree %}` / `{% folder %}` / `{% file %}`); click a file to open its source in a modal.
- [Update](/components/extras/update/) — an inline release-note entry on a timeline rail: a version/date label beside its Markdown body (`{% update %}`).
- [Visibility](/components/extras/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`.