CodeBlock - Spektral UI

Variant

Size

Copyable

Line numbers

Rounded

Description

Max height

TokenConfig

TypeScript

<CodeBlock
     variant="titled"
     title="TokenConfig"
     language="TypeScript"
     copyable
     rounded={false}
     code={snippet}
/> 

npm install @my/design-system

doc.md

Markdown

This is a Markdown block !

npx sv create my-app

Svelte

<CodeBlock code={snippet} copyable />

API

Prop	Type	Default
variant	`"simple" \| "titled" \| "filename" \| "tabbed" \| "terminal"`	`"simple"`
size	`"sm" \| "md" \| "lg"`	`"md"`
title	`string`	`undefined`
filename	`string`	`undefined`
description	`string`	`undefined`
description_src	`string`	`undefined`
language	`string`	`undefined`
tabs	`Tab[]`	`undefined`
code	`string`	`undefined`
code_src	`string`	`undefined`
copyable	`boolean`	`false`
line_numbers	`boolean`	`false`
rounded	`boolean`	`false`
width	`string`	`undefined`
max_height	`string`	`undefined`

Prop variant

Type "simple" | "titled" | "filename" | "tabbed" | "terminal"

Default "simple"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop title

Type string

Default undefined

Prop filename

Type string

Default undefined

Prop description

Type string

Default undefined

Prop description_src

Type string

Default undefined

Prop language

Type string

Default undefined

Prop tabs

Type Tab[]

Default undefined

Prop code

Type string

Default undefined

Prop code_src

Type string

Default undefined

Prop copyable

Type boolean

Default false

Prop line_numbers

Type boolean

Default false

Prop rounded

Type boolean

Default false

Prop width

Type string

Default undefined

Prop max_height

Type string

Default undefined