Code Block

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

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

Import snippet

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

Component preview

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

<CodeBlock code={source} />

Multi-line Code Block

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

Component preview

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 preview

<CodeBlock wrap code={longLine} />

Without the Copy button

export const version = "1.0.0";

Component preview

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

2-Column Side-by-Side Split

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
  split="horizontal"
  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-sm">
    <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 Preview Drawer

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
  collapsible
  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.
variant	"standalone" \| "attached"	—	Layout mode: standalone (independent box) or attached (anchored below component preview). Default 'standalone'.
split	"vertical" \| "horizontal"	—	Split orientation when pairing code with a live preview children: 'vertical' (stacked) or 'horizontal' (2-column side-by-side). Default 'vertical'.
previewPosition	"left" \| "right" \| "top" \| "bottom"	—	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.
previewClassName	string	—	Optional class name for the preview container.
wrap	boolean	—	Whether code wraps lines automatically (whitespace-pre-wrap). Default false.
copyable	boolean	—	Show one-click Copy button overlay. Default true.
collapsible	boolean	—	Whether the code drawer is collapsible with a View/Hide code button below the preview. Default false.
defaultOpen	boolean	—	Default open state when collapsible is enabled. Default false.
open	boolean	—	Controlled open state when collapsible is enabled.
onOpenChange	(open: boolean) => void	—	Callback fired when collapsible open state changes.
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).
className	string	—	Custom wrapper class name.

* required