CodeExample

Code example card with live preview, syntax highlighting, copy-to-clipboard, and a collapsible code panel.

Playground

Basic Example

Short explanation

<Button>Click</Button>

Show Preview

Title

Description

Code

Language

<CodeExample />

01 Examples

The core props in action

Preview + code

Children render as the live preview; the code prop feeds the highlighted panel.

<CodeExample title="Save action" code={buttonSnippet} language="svelte">
  <Button intent="primary">Save changes</Button>
</CodeExample>

Code-only

preview=false hides the preview stage — for snippets that are not renderable UI.

import { codeExampleVariants } from '@urbicon-ui/docs';

const styles = codeExampleVariants({ size: 'sm' });

Collapsed by default

defaultExpanded=false starts with the code panel folded, overriding the page-wide toggle.

Active

<CodeExample title="Status" defaultExpanded={false} code={badgeSnippet}>
  <Badge intent="success">Active</Badge>
</CodeExample>

02 Usage Notes

Best practices and important considerations

03 Accessibility

Preview and code are one figure, two regions

The preview stage and the code panel are separate regions, each named from the example's title, so a screen-reader user can tell which of the two they have landed in rather than hearing the same name twice.

Nothing is preview-only

Whatever the preview renders is also in the code panel, so a reader who cannot use the visual preview still gets the whole example. This is why isolate exists: it extracts the children as the snippet at build time instead of letting the two drift.

The collapse is a button, not a heading

Expanding the code panel is an ordinary button with aria-expanded, in the tab order, with a visible focus ring. The example title above it stays a heading, so the page outline does not change when a panel is folded.

04 API Reference

Complete list of component properties and their configurations

16 props

Prop	Type	Default	Description
`children`	`Snippet`	—	Live preview content rendered above the code block.
`class`	`string`	—	Extra classes merged onto the root container element.
`code`	`string`	—	Source code string to display with syntax highlighting.
`defaultExpanded`	`boolean`	—	Override the default expanded state from the global code-visibility context.
`description`	`string`	—	Short description shown between title and preview.
`headingLevel`	1234 +2 more	`3`	Heading level for the example title, clamped to 1..6. Examples usually sit inside a titled `<Section>` (`h2`), so `h3` is the default. Pass `2` on a page whose body is a single untitled `<Section>` — the table feature pages are built that way, and there the fixed `h3` followed the page `h1` directly. The title styling is class-driven, so the level never changes how the card looks.
`isolate`	`boolean`	—	Opt-in for the Vite plugin: children are auto-extracted as `code` at build time.
`language`	`string`	—	Language for syntax highlighting (e.g. 'svelte', 'typescript', 'css').
`preview`	`boolean`	`true`	Render the live preview section above the code block.
`previewClass`	`string`	—	CSS classes for the preview wrapper div when `isolate` is set.
`size` variant	lgmdsm	`md`	Controls the dimensions, padding, and text size of the CodeExample. Affects the component's physical footprint. Available options: lg, md, sm.
`slotClasses`	`Partial<Record<CodeExampleSlotName, string>>`	—	Per-slot class overrides for internal elements.
`title`	`string`	—	Title displayed in the card header.
`unstyled`	`boolean`	—	Remove all default tv styles from internal slots.
`...CodeExampleVariantProps` variant	`VariantProps`	—	Styling variants from CodeExampleVariantProps
`...HTMLAttributes<HTMLDivElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children' \| 'title')

05 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Description
CodeExampleSlotName	type	helper	CodeExample's own slots, plus the `CodePanelSlotName` slots it forwards to the embedded panel. `codeSection` is the alias for the panel's `root`.
CodeExampleProps	interface	props	Code example with optional live preview, syntax highlighting, and copy-to-clipboard. Delegates code display to the shared CodePanel primitive.
CodeExampleVariantProps	type	variant	—
CodeExampleSlots	type	variant	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.
CodePanelSlotName	type	helper	Public name for the panel's slots. Derived from the tv config rather than hand-listed, so the union and the config cannot drift apart.
CodePanelSlots	type	variant	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

06 Installation

Import

import { CodeExample } from '@urbicon-ui/docs';

llm.txt