Code
An inline or block code snippet, with optional filename/language header and syntax highlighting.
<UiCode />Inline
inline renders an inline <code> span for naming a command or an identifier mid-sentence, instead of the block form.
Install the package with npm install bundy-ui, then import components as needed.
Code
code is the source to display. Falls back to the default slot, but pass this whenever you want highlighting — Shiki needs the raw text, not rendered slot content.
{
"id": 1,
"name": "Example Item",
"active": true
}Syntax highlighting only runs when both code (a string prop) and language are set — the default slot is a plain-text fallback and is never highlighted.
Highlighting happens client-side after hydration (via Shiki), so SSR/curl output shows the plain, unhighlighted text briefly.
Filename
filename is shown in a header bar above the code, naming the file the snippet came from. It's ignored when inline is set, where there's no header to put it in.
<template>
<UiButton>Click me</UiButton>
</template>Language
language sets what to highlight as, and the tag shown in the corner.
npm install bundy-uiexport const greet = (name: string) => `Hello, ${name}`;Copy
copy adds a copy button, and makes the whole block clickable to copy.
<template>
<UiButton>Click me</UiButton>
</template>Bare
bare drops the surrounding Card chrome — ring, rounding, background — for composing into a parent that already provides one.
export const bare = true;bare strips the surrounding Card (ring, rounding, background) but keeps everything else — filename bar, language tag, copy button, highlighting. It exists for components that already provide their own card surface and just need the code-rendering part, e.g. CodePreview, so the result isn't a card nested inside another card.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
stringstringbooleanfalseSlots
default