Components
CodeBlock
A syntax-highlighted code card with a title and copy button.
Props
Native attributes and event handlers are forwarded to the underlying div element unless
handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
body | Snippet | undefined | Custom body snippet. |
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
code | string | '' | Source text to highlight and copy. |
copyClickHandler | () => void | clipboard copy handler | Overrides the default clipboard copy handler. |
element | HTMLDivElement | null | null | Bindable reference to the underlying DOM element. |
header | Snippet | undefined | Custom header snippet. |
html | string | '' | Bindable highlighted HTML output. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isCopied | boolean | false | Bindable feedback state for the copy button. |
isLineNumbersVisible | boolean | true | Shows line numbers in highlighted code. |
isLoading | boolean | true | Bindable highlighting loading state. |
isVisible | boolean | true | Bindable visibility state. |
options | Partial<CodeToHastOptions<BundledLanguage, BundledTheme>> | undefined | Shiki language, color theme, and transformer options. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
title | string | '' | Title displayed in the code block header. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import CodeBlock from sveltewind/components. This example shows its default styling in a usable context.
hello.ts
Loading...+page.svelte
Loading...Examples
Theme variants
Every variant available for CodeBlock in the built-in themes is shown below.
compact — Apply the compact variant.
hello.ts
Loading...+page.svelte
Loading...wrap — Apply the wrap variant.
hello.ts
Loading...+page.svelte
Loading...scrollable — Apply the scrollable variant.
hello.ts
Loading...+page.svelte
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
hello.ts
Loading...+page.svelte
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
hello.ts
Loading...+page.svelte
Loading...Content and values
Provide different code, title values.
answer.ts
Loading...+page.svelte
Loading...Hide line numbers
Keep the title and copy action while hiding line numbers.
hello.ts
Loading...+page.svelte
Loading...