CodePanel

Collapsible code block with syntax highlighting, line numbers and copy-to-clipboard. The shared primitive behind CodeExample and PlaygroundConfigurator.

Playground

<script lang="ts">
  import { Button } from '@urbicon-ui/blocks';

  let count = $state(0);
</script>

<Button onclick={() => count++}>
  Clicked {count} times
</Button>

Language

Line numbers

Size

Label

<CodePanel />

01 Examples

Line numbers below the threshold

auto leaves the gutter off for short snippets — a single line gains nothing from a number in front of it.

bun add @urbicon-ui/blocks

<div class="w-full">
  <CodePanel code={ONE_LINER} language="bash" label="Install" />
</div>

Forced on

Pass lineNumbers explicitly to override the threshold in either direction.

bun add @urbicon-ui/blocks

<div class="w-full">
  <CodePanel code={ONE_LINER} language="bash" label="Install" lineNumbers={true} />
</div>

Collapsed by default

Without expanded/onToggle the panel owns its state; the toolbar toggle opens it.

<script lang="ts">
  import { Button } from '@urbicon-ui/blocks';

  let count = $state(0);
</script>

<Button onclick={() => count++}>
  Clicked {count} times
</Button>

<div class="w-full">
  <CodePanel code={SAMPLE} language="svelte" label="Counter button" />
</div>

02 Usage Notes

03 Accessibility

Built-in ARIA

The code region is a role="textbox" with aria-readonly and a name composed from label, so a screen reader announces which example it is reading. The toggle carries aria-expanded; the copy button announces its result through a polite status region rather than only changing its icon.

Keyboard

The code region is focusable (tabindex="0") so it can be scrolled without a pointer. Toggle and copy are ordinary buttons in the tab order, both with a visible focus ring.

While highlighting loads

Shiki is loaded lazily. The placeholder is an aria-live="polite" region, so the swap to highlighted code is announced instead of happening silently.

04 API Reference

Complete list of component properties and their configurations

11 props 1 required

Prop	Type	Default	Description
`code` required	`string`	—	Source code string to display with syntax highlighting.
`class`	`string`	—	Extra classes merged onto the root element.
`expanded`	`boolean`	—	Controlled expanded state. When omitted, the panel manages its own state.
`label`	`string`	—	Human-readable title that names the read-only code region for assistive tech (`aria-label` on the `role="textbox"`). Composed as `Code example: {label}`; falls back to `Code example` when omitted so the name is never empty.
`language`	`string`	`'svelte'`	Language for syntax highlighting and the toolbar language tag.
`lineNumbers`	auto	`'auto'`	Show line numbers in the gutter. `'auto'` (the default) shows them only from `LINE_NUMBER_AUTO_THRESHOLD` lines up — a snippet short enough to take in at a glance (an import one-liner) gains nothing from a `1` in front of it. Pass `true`/`false` to force it either way. Numbers are rendered as CSS generated content, so they are never part of the copied text or a selection.
`onToggle`	`() => void`	—	Called when the toggle button is clicked. Required when `expanded` is controlled.
`size` variant	lgmdsm	`md`	Controls the dimensions, padding, and text size of the CodePanel. Affects the component's physical footprint. Available options: lg, md, sm.
`slotClasses`	`Partial<Record<CodePanelSlotName, string>>`	—	Per-slot class overrides for internal elements.
`unstyled`	`boolean`	—	Remove all default tv styles from internal slots.
`...CodePanelVariantProps` variant	`VariantProps`	—	Styling variants from CodePanelVariantProps

05 Types

Local type definitions used by this component.

4 types

Only referenced

Name	Kind	Category	Used by	Description
CodePanelSlotName	type	helper	0	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.
CodePanelProps	interface	props	0	—
CodePanelVariantProps	type	variant	1	—
CodePanelSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

06 Installation

Import

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

llm.txt