Code Block

Syntax-highlighted code block component with integrated copy button and standalone or attached card variants.

// Plain markup
import { CodeBlock } from "@shavin/ui";

Multi-line Code Block

function Welcome({ name }: { name: string }) {
  return (
    <Card>
      <Heading>Hello, {name}</Heading>
      <Text>Welcome back to the dashboard.</Text>
    </Card>
  );
}

Component Source

import { CodeBlock } from "@shavin/ui";

<CodeBlock code={source} />

Wrapping long lines

const message = "This is a deliberately long single line of code that would otherwise scroll horizontally, but with the wrap prop it breaks onto multiple lines instead.";

Component Source

<CodeBlock wrap code={longLine} />

Without the Copy button

export const version = "1.0.0";

Component Source

<CodeBlock copyable={false} code={source} />

Split View

Horizontal split displaying live rendered preview on one side and syntax-highlighted code on the other.

<Card className="p-4 flex flex-col gap-2">
  <span className="text-xs font-semibold text-fg">Active Session</span>
  <span className="text-xs text-fg-subtle">Last synced 2m ago</span>
</Card>

Active SessionLast synced 2m ago

Horizontal split displaying live rendered preview on one side and syntax-highlighted code on the other.

<CodeBlock
  variant="split"
  previewPosition="right"
  code={`<Card className="p-4 flex flex-col gap-2">
  <span className="text-xs font-semibold text-fg">Active Session</span>
  <span className="text-xs text-fg-subtle">Last synced 2m ago</span>
</Card>`}
>
  <Card className="p-4 flex flex-col gap-2 w-full max-w-xs shadow-card">
    <span className="text-xs font-semibold text-fg">Active Session</span>
    <span className="text-xs text-fg-subtle">Last synced 2m ago</span>
  </Card>
</CodeBlock>

Collapsible

Component preview card with a description footer and an animated source code drawer.

Publish controls with split preview and primary action

<Flex gap="2" align="center">
  <Button variant="outline" size="sm">Preview</Button>
  <Button variant="solid" size="sm">Publish</Button>
</Flex>

Component preview card with a description footer and an animated source code drawer.

<CodeBlock
  variant="collapsible"
  state="close"
  description="Publish controls with split preview and primary action"
  code={`<Flex gap="2" align="center">
  <Button variant="outline" size="sm">Preview</Button>
  <Button variant="solid" size="sm">Publish</Button>
</Flex>`}
>
  <Flex gap="2" align="center">
    <Button variant="outline" size="sm">Preview</Button>
    <Button variant="solid" size="sm">Publish</Button>
  </Flex>
</CodeBlock>

Props

Prop	Type	Default	Description
code*	string	—	Source code string to highlight.
language	SupportedLanguage	tsx	Language identifier for syntax coloring (e.g. 'tsx', 'typescript', 'html', 'css', 'json', 'bash', 'python', 'sql'). Default 'tsx'.
appearance	"dark" \| "light" \| "auto"	auto	Explicit appearance mode: 'dark' (forces dark theme), 'light' (forces light theme), or 'auto' (inherits from page theme). Default 'auto'.
theme	"dark" \| "light" \| "auto"	—	Optional alias for appearance.
variant	"standalone" \| "attached" \| "collapsible" \| "split"	standalone	Layout variant: 'standalone' (independent code box), 'attached' (anchored below component preview), 'collapsible' (expandable code drawer with view/hide toggle), or 'split' (horizontal side-by-side preview and code). Default 'standalone'.
collapsible	boolean	—	Optional alias for variant="collapsible".
split	"vertical" \| "horizontal"	vertical	Split orientation when pairing code with a live preview: 'vertical' (stacked) or 'horizontal' (side-by-side). Default 'vertical' (or 'horizontal' when variant='split').
previewPosition	"left" \| "right" \| "top" \| "bottom"	right	Position of the preview relative to the code block: 'left' \| 'right' \| 'top' \| 'bottom'. Default 'right' when split='horizontal', 'top' when split='vertical'.
children	ReactNode	—	Optional live preview component rendered alongside the code block.
wrap	boolean	false	Whether code wraps lines automatically (whitespace-pre-wrap). Default false.
copyable	boolean	true	Show one-click Copy button overlay. Default true.
state	"open" \| "close"	close	Collapsible drawer state ('open' \| 'close') when variant='collapsible'. Default 'close'.
defaultOpen	boolean	—	Optional initial open state for collapsible mode.
onStateChange	(state: "open" \| "close") => void	—	Callback fired when collapsible state changes ('open' \| 'close').
description	string	—	Optional label or description displayed in the collapsible footer bar.
title	string	—	Optional title displayed in the collapsible footer bar (alias for description).

* required