Preview
Frame a rendered example and optional source.
On this page
View code
import Badge from "@chitrank2050/monoline-docs/components/Badge.astro";
import Preview from "@chitrank2050/monoline-docs/components/Preview.astro";
<Preview title="Static example">
<Badge>Stable</Badge>
</Preview>Usage
The default slot contains the rendered example. Use source and language for the faded, expandable code presentation, or the code slot for custom source content. Set showCaption={false} when the surrounding section already describes the example; the title remains its accessible name. Source and the code slot cannot be combined. Snippets of up to four lines show in full with no fade or View code control; longer snippets use the expandable preview. Consumer preview styles are excluded from article typography. React hydration is explicitly authored with Astro client directives.
Interactive content and source slot
More details
A native disclosure.
import Accordion from "@chitrank2050/monoline-docs/components/Accordion.astro";
<Accordion title="More details" />View code
import Accordion from "@chitrank2050/monoline-docs/components/Accordion.astro";
import CodeBlock from "@chitrank2050/monoline-docs/components/CodeBlock.astro";
import Preview from "@chitrank2050/monoline-docs/components/Preview.astro";
<Preview title="Disclosure example" mode="interactive">
<Accordion title="More details">
<p>A native disclosure.</p>
</Accordion>
<CodeBlock
slot="code"
code={'<Accordion title="More details" />'}
language="astro"
/>
</Preview>API reference
| Name | Type | Default | Description |
|---|---|---|---|
title | string | Required | Example caption. |
source | string | — | Copyable source with a faded teaser and native View code disclosure. |
language | string | — | Syntax language for source highlighting. |
showCaption | boolean | true | Show the visible caption; title remains required. |
mode | static | interactive | static | Describes the example; does not hydrate components. |
Behavior and accessibility
Preview frames display authored content; mode labels do not hydrate it. Link activation and form submission inside rendered previews stay local when JavaScript is available.