Browse Components
Example
A reusable live preview with collapsible source code.
Basic
A reusable live preview with collapsible source code.
View code
<button class="btn secondary" type="button">Try this button</button>View Code
<section class="example" aria-label="Button example">
<div class="example-frame">
<div class="example-preview" data-width="compact">
<div class="example-content stack">
<button class="btn secondary" type="button">
Try this button
</button>
</div>
</div>
<details>
<summary>
View code
</summary>
<div class="example-code">
<pre tabindex="0" aria-label="Button HTML">
<code>
<
button class="btn secondary" type="button"
>
Try this button
<
/button
>
</code>
</pre>
</div>
</details>
</div>
</section>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/example.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/disclosure.css">12,526 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Show working components
Render trusted component markup in the live preview. Load its shared styles and runtime once on the page.
Keep overlays free
Menus, tooltips and dialogs should extend beyond the example border. Do not clip the preview; reserve iframes for page-layout and viewport-boundary demos.
Keep examples independent
Use unique IDs and matching labels, ARIA references and radio names. Escape the source code inside pre/code.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.