DS0
Components

CodeBlock

A syntax-highlighted code display with copy functionality, line numbers, and line highlighting.

Overview

CodeBlock renders formatted code with syntax highlighting, a copy-to-clipboard button, optional line numbers, and the ability to highlight specific lines.

Usage

<CodeBlock language="tsx" showLineNumbers highlightLines={[3, 4]}>
{`import { Button } from 'ds0';

<Button variant="primary">
  Click me
</Button>`}
</CodeBlock>

API Reference

PropTypeDefaultDescription
languagestring'text'Syntax highlighting language
showLineNumbersbooleanfalseDisplay line numbers
highlightLinesnumber[][]Lines to highlight
copyablebooleantrueShow copy button
titlestring—Optional title bar
ComponentWhen to Use Instead
CodeInline code snippets
TerminalInteractive terminal display
DiffViewerComparing code changes

Carousel

Displays a series of content panels that can be navigated via controls, indicators, and auto-play.

DiffViewer

A diff viewer for comparing text changes with color-coded additions and deletions.

On this page

OverviewUsageAPI ReferenceRelated Components