CodePreview
A live-rendered preview above a collapsible `Code` block showing the source behind it — the pattern this very docs site uses for every component example.
<UiCodePreview :code="..." />Code
requiredcode is the source shown in the collapsible panel under the preview. The preview itself is the default slot — real, interactive content, not a screenshot of it — so the two are written separately and it is on you to keep them in step.
<UiBadge text="3" color="error">
<UiButton icon="bell" variant="soft" />
</UiBadge>variant only styles the outer card wrapping both the preview and the code panel — it's unrelated to Code's own bare prop, which is always forced on internally so the inner code block never renders as a nested card.
Language
language is passed straight through to the inner Code, setting both the syntax highlighting and the tag shown in the corner of the panel.
Filename
filename puts a header bar on the code panel naming the file. Without one the panel opens straight into the code, which is right for a fragment that doesn't correspond to a file at all.
Variant
variant styles the card wrapping both halves — the preview and the code panel together. It's unrelated to Code's own bare prop, which is always forced off inside here. Reach for subtle when the demo renders its own raised surface and an outlined card around it would read as a second border.
Copy
copy shows a button that copies the sample to the clipboard. It defaults to true here — the opposite of Code's own default — because a snippet sitting under a live preview is almost always something you want to take away.
The code panel is a Collapsible wrapping a Code, not a new implementation — language/filename/copy are passed straight through to that inner Code. defaultOpen controls whether it starts expanded; there's no open/update:open here, unlike Collapsible itself, since a single always-uncontrolled toggle button is the only use case this component targets.
copy defaults to true here (opposite of Code's own default of false) — a code sample sitting under a live preview is almost always something someone will want to copy, so this flips the more common case to the default without you having to opt in every time.
Default open
defaultOpen starts with the code panel expanded instead of collapsed, for a sample where the markup is the point rather than the render.
<UiTag color="primary">Tag</UiTag>`variant` — outline (default), subtle
Example
Example
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
stringbooleantrueSlots
default