Layout
Frame, Accordion, AccordionGroup, Expandable — for framing media and folding content.
~ 2 min read
| Component | Use for |
|---|---|
<Frame> | Frame around an image or media block, optional caption |
<Accordion> | Collapsible section with title + description |
<AccordionGroup> | Stack accordions into a single bordered card |
<Expandable> | Lightweight inline disclosure — for nested-field reveals |
Frame
Wraps a slot in a soft framed surface with rounded corners and an optional caption underneath. Most useful for screenshots and diagrams.
| Prop | Type | Default | Description |
|---|---|---|---|
caption | string | — | Centered caption rendered below the slot |
<Frame caption="The default Tangly starter site">
<img src="/images/tangly-icon.png" alt="Tangly screenshot" />
</Frame>
Without caption
<Frame>
<img src="/images/tangly-logo.png" alt="Tangly logo" />
</Frame>
Accordion
Collapsible block — a title and an optional description sit on the always-visible row, the rest is revealed when expanded.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Visible heading (required) |
description | string | — | Smaller subtitle under the title |
icon | string | — | Lucide icon next to the title |
defaultOpen | boolean | false | Render expanded on first paint |
<Accordion title="What's the difference between Tangly and Mintlify?" icon="message-circle-question">
Mintlify is a SaaS docs platform. Tangly is an OSS framework that renders
Mintlify projects unmodified — but you self-host, you ship to any static host,
and you can eject to plain Astro at any point.
</Accordion> What's the difference between Tangly and Mintlify?
Mintlify is a SaaS docs platform. Tangly is an OSS framework that renders Mintlify projects unmodified — but you self-host, you ship to any static host, and you can eject to plain Astro at any point.
With description
<Accordion
title="Performance"
description="What's the build budget on a 500-page site?"
defaultOpen
>
Roughly one second per 100 pages on a stock M1, with full search index.
</Accordion> Performance What's the build budget on a 500-page site?
Roughly one second per 100 pages on a stock M1, with full search index.
AccordionGroup
Wraps multiple <Accordion> children into one bordered card with dividers.
<AccordionGroup>
<Accordion title="Can I deploy to Cloudflare Pages?">
Yes — `tangly build --adapter cloudflare`.
</Accordion>
<Accordion title="Does search work offline?">
Yes. Pagefind builds a static index that runs entirely in the browser.
</Accordion>
<Accordion title="What about i18n?">
Multi-language navigation ships in `docs.json`; per-page translations are MDX-by-MDX.
</Accordion>
</AccordionGroup> Can I deploy to Cloudflare Pages?
Yes — tangly build --adapter cloudflare.
Does search work offline?
Yes. Pagefind builds a static index that runs entirely in the browser.
What about i18n?
Multi-language navigation ships in docs.json; per-page translations are MDX-by-MDX.
Expandable
A lighter-weight disclosure than <Accordion> — a dashed border, no description, no icon. Designed for nested field reveals inside <ParamField> and <ResponseField>.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Visible label (required) |
defaultOpen | boolean | false | Render expanded on first paint |
<Expandable title="Show schema">
```json
{
"type": "object",
"properties": {
"id": { "type": "string" },
"name": { "type": "string" }
}
}
```
</Expandable>