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.

Default with title

App.tsx
import { Button } from '@ds0/react'; export function App() {  return (    <Button variant="primary" size="md">      Click me    </Button>  );}

With line numbers & highlighted lines

Highlighted
1import { Button } from '@ds0/react';2 3export function App() {4  return (5    <Button variant="primary" size="md">6      Click me7    </Button>8  );9}

Ghost variant

styles.css
.button {  background: var(--color-primary);  border-radius: 0.5rem;  padding: 0.5rem 1rem;}

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