CodeBlock

Display copyable code with syntax highlighting, line numbers, fullscreen viewing, and resizing.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use CodeBlock to display copyable code with built-in copy and fullscreen actions. Check the supported scope before using it for editable code; this display component is not an editor.

Supply code for display. Copy and fullscreen buttons appear by default; visibleLines sets the initial number of visible lines.
singleLine displays one line without a language label, line numbers, fullscreen panel, or vertical scrolling. A child with as="trailing" replaces the right action area.

Import

import { CodeBlock } from '@snowui-design-system/components';

Usage

Variants

Show Language

Show Line Numbers

Show Expand Button

Horizontal Scrollbar Visibility

API Reference

Property	Type	Default	Example	Description
`variant`	`"default" \| "singleLine"`	`"default"`	`variant="default"`	singleLine uses the same Leading, Content, and Trailing slot arrangement as Input. It displays one line and omits height resizing, language label, line numbers, fullscreen view, and vertical scrolling.
`code`	`string`	`""`	`code="Example"`	Code string to display.
`language`	`string`	`""`	`language="Example"`	Language identifier and formatting parser. Supports Svelte, JavaScript, JSX, TypeScript, TSX, HTML, CSS, SCSS, Less, JSON, JSONC, YAML, Markdown, and GraphQL aliases. When empty, detects Svelte/HTML, JSON, or JS/TS from content. An unknown explicit language preserves the source text.
`format`	`boolean`	`true`	`format`	Format according to language by default. The normal view, fullscreen view, line numbers, and copy action share the result. false preserves source text; singleLine always preserves it. Source text is also preserved when parsing fails, the language is unknown, or input exceeds 200,000 characters.
`showLanguage`	`boolean`	`true`	`showLanguage`	Show the language label.
`showLineNumbers`	`boolean`	`false`	`showLineNumbers`	Show code line numbers in normal and fullscreen views, avoiding a horizontal jump when switching views.
`showCopyButton`	`boolean`	`true`	`showCopyButton`	Show the built-in copy button.
`showExpandButton`	`boolean`	`true`	`showExpandButton`	Show the built-in fullscreen button.
`horizontalScrollbarVisibility`	`"always" \| "hover"`	`"always"`	`horizontalScrollbarVisibility="always"`	Show the horizontal scrollbar whenever content overflows, or only while the pointer is over the code block.
`visibleLines`	`number`	`5`	`visibleLines={42}`	Maximum number of visible lines in the normal view. Shorter content sets its own height; longer content scrolls. The fullscreen view has no such limit.
`copyTimeout`	`number`	`2000`	`copyTimeout={42}`	How long the copied Check icon stays visible, in milliseconds, before the Copy icon returns.
`children`	`Snippet`	`—`	`<CodeBlock>Content</CodeBlock>`	Code content or accessory source. Plain text becomes code; a child with as="trailing" replaces the right action area.
`parts`	`ComponentPartsOf<{ Indicator: typeof Indicator; CopyButton: typeof CopyButton; ExpandButton: typeof ExpandButton; }>`	`—`	`parts={partsOptions}`	Configure only the built-in CopyButton, ExpandButton, and Indicator. Explicit child accessories do not inherit these settings. Button emphasis can be set here.