Code
<script lang="ts">
import { CodeBlock } from 'sv5ui-plus';
</script>
<CodeBlock
title="Code"
code={`type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }`}
/>
CodeBlock
Display code snippets with a consistent header, copy button, and theme-aware styling.
Basic
Code
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
With highlighted HTML
Provide pre-highlighted HTML (for example, from Shiki) via the html prop.
Code
<script lang="ts">
import { Button } from 'sv5ui';
</script>
<Button label="Hello" />
Variants
outline
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
soft
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
subtle
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
solid
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
ghost
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
none
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
Sizes
sm
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
md
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
lg
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
Copy controls
copyable=false
type User = { _id: string; name: string }
const user: User = { _id: 'u_1', name: 'Jane' }
console.log(user)
custom copyText
Visible code