---

## CodeExample
Code example with optional live preview, syntax highlighting, and copy-to-clipboard.
Delegates code display to the shared CodePanel primitive.

**Import:** `import { CodeExample } from '@urbicon-ui/docs';`

### Examples
```svelte
<CodeExample title="Basic Usage" code={`<Button>Click me</Button>`} language="svelte">
  <Button>Click me</Button>
</CodeExample>
```

### Variants
- size: lg, md, sm (default: md)
- hasPreview: false, true (default: true)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...CodeExampleVariantProps | `VariantProps` | no |  | Styling variants from CodeExampleVariantProps |
| children | `Snippet` | no |  | Live preview content rendered above the code block. |
| class | `string` | no |  | Extra classes merged onto the root container element. |
| code | `string` | no |  | Source code string to display with syntax highlighting. |
| defaultExpanded | `boolean` | no |  | Override the default expanded state from the global code-visibility context. |
| description | `string` | no |  | Short description shown between title and preview. |
| isolate | `boolean` | no |  | Opt-in for the Vite plugin: children are auto-extracted as `code` at build time. |
| language | `string` | no |  | Language for syntax highlighting (e.g. 'svelte', 'typescript', 'css'). |
| preview | `boolean` | no | true | Render the live preview section above the code block. |
| previewClass | `string` | no |  | CSS classes for the preview wrapper div when `isolate` is set. |
| slotClasses | `Partial<Record<'container' | 'title' | 'description' | 'preview' | 'previewContent' | 'toolbar' | 'codeSection' | 'codeToggle' | 'codeChevron' | 'languageTag' | 'copyButton' | 'codeCollapse', string>>` | no |  | Per-slot class overrides for internal elements. |
| title | `string` | no |  | Title displayed in the card header. |
| unstyled | `boolean` | no |  | Remove all default tv styles from internal slots. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the CodeExample. Affects the component's physical footprint. Available options: lg, md, sm. |
| hasPreview | `'false' | 'true'` | no | true | Controls the hasPreview behavior and appearance of the CodeExample component. Available options: false, true. |

Inherited from:
- CodeExampleVariantProps (external)

### Slots (slotClasses keys)
`container`, `title`, `description`, `preview`, `previewContent`, `toolbar`, `codeSection`, `codeToggle`, `codeChevron`, `languageTag`, `copyButton`, `codeCollapse`