Svelte AI Elements

Code Block

The CodeBlock component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/code.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/code

Props

Code

NameTypeDefault
code
string
lang
SupportedLanguage 'typescript'
variant
'default' | 'ghost' 'default'
hideLines
boolean false
highlight
(number | [number, number])[] []
class
string
children
Snippet
ref
HTMLDivElement
...restProps
HTMLAttributes<HTMLDivElement>

CodeCopyButton

NameTypeDefault
variant
ButtonProps['variant'] 'ghost'
size
ButtonProps['size'] 'icon'
class
string
ref
HTMLButtonElement
...restProps
CopyButtonProps

CodeOverflow

NameTypeDefault
collapsed
boolean true
class
string
children
Snippet
...restProps
HTMLAttributes<HTMLDivElement>