CodeBlock

Stable

A multi-line code sample with title, line numbers, highlighting and copy.

CodeBlock shows source code with light, dependency-free highlighting for TypeScript, CSS, shell and JSON. Code is always rendered as text, never as HTML. The scroll region is focusable so keyboard users can scroll long lines.

Source Edit docs Report an issue

Overview

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

tsx

import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function Basic() {
  return <CodeBlock code={tsx} language="tsx" title="app.tsx" />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

Light

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

Dark

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

High contrast

Import

tsx

import { CodeBlock } from '@bindshq/stance-react';

Examples

Line numbers and highlights

1import { Button, ThemeProvider } from '@bindshq/stance-react';
2import '@bindshq/stance-tokens/css';
3import '@bindshq/stance-react/styles.css';
4

5export function App() {
6  // One system, two products
7  return (
8    <ThemeProvider>
9      <Button>Save changes</Button>
10    </ThemeProvider>
11  );
12}

tsx

import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function LineNumbers() {
  return (
    <CodeBlock
      code={tsx}
      language="tsx"
      title="app.tsx"
      showLineNumbers
      highlightLines={[8, 9, 10]}
    />
  );
}

Shell

# Install Stance
npm install @bindshq/stance-tokens @bindshq/stance-react

tsx

import { CodeBlock } from '@bindshq/stance-react';

export function Shell() {
  return (
    <CodeBlock
      code={'# Install Stance\nnpm install @bindshq/stance-tokens @bindshq/stance-react'}
      language="bash"
    />
  );
}

API reference

Prop	Type	Default	Description
`code`* required	`string`	None	Source code (rendered as text).
`language`	`string`	None	ts, tsx, js, jsx, css, bash, json. Others render plain.
`title`	`ReactNode`	None	Title, e.g. a file name.
`showLineNumbers`	`boolean`	`false`	Show line numbers.
`highlightLines`	`number[]`	None	1-based lines to emphasise.
`copyable`	`boolean`	`true`	Show a copy button.
`wrap`	`boolean`	`false`	Wrap long lines.
`maxHeight`	`string`	None	Scroll beyond this height.
`label`	`string`	None	Accessible name of the region.

Accessibility

The code region is focusable (tabindex="0") and labelled, so keyboard users can scroll it.
Line numbers are aria-hidden so they are not read with the code.
Highlighting never carries meaning on its own.

Keyboard

Keys	Action
`Tab`	Focuses the copy button, then the scroll region.
`←` `→` `↑` `↓`	Scroll the focused code region.

Usage guidelines

Do

Keep samples short and runnable.

Don’t

Render user-supplied HTML as code output.

Components Media & code

CodeBlock

Stable

A multi-line code sample with title, line numbers, highlighting and copy.

Source Edit docs Report an issue

Overview

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

tsx

import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function Basic() {
  return <CodeBlock code={tsx} language="tsx" title="app.tsx" />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

Light

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

Dark

import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';


export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}

High contrast

Import

tsx

import { CodeBlock } from '@bindshq/stance-react';

Examples

Line numbers and highlights

1import { Button, ThemeProvider } from '@bindshq/stance-react';
2import '@bindshq/stance-tokens/css';
3import '@bindshq/stance-react/styles.css';
4

5export function App() {
6  // One system, two products
7  return (
8    <ThemeProvider>
9      <Button>Save changes</Button>
10    </ThemeProvider>
11  );
12}

tsx

import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function LineNumbers() {
  return (
    <CodeBlock
      code={tsx}
      language="tsx"
      title="app.tsx"
      showLineNumbers
      highlightLines={[8, 9, 10]}
    />
  );
}

Shell

# Install Stance
npm install @bindshq/stance-tokens @bindshq/stance-react

tsx

import { CodeBlock } from '@bindshq/stance-react';

export function Shell() {
  return (
    <CodeBlock
      code={'# Install Stance\nnpm install @bindshq/stance-tokens @bindshq/stance-react'}
      language="bash"
    />
  );
}

API reference

Prop	Type	Default	Description
`code`* required	`string`	None	Source code (rendered as text).
`language`	`string`	None	ts, tsx, js, jsx, css, bash, json. Others render plain.
`title`	`ReactNode`	None	Title, e.g. a file name.
`showLineNumbers`	`boolean`	`false`	Show line numbers.
`highlightLines`	`number[]`	None	1-based lines to emphasise.
`copyable`	`boolean`	`true`	Show a copy button.
`wrap`	`boolean`	`false`	Wrap long lines.
`maxHeight`	`string`	None	Scroll beyond this height.
`label`	`string`	None	Accessible name of the region.

Accessibility

The code region is focusable (tabindex="0") and labelled, so keyboard users can scroll it.
Line numbers are aria-hidden so they are not read with the code.
Highlighting never carries meaning on its own.

Keyboard

Keys	Action
`Tab`	Focuses the copy button, then the scroll region.
`←` `→` `↑` `↓`	Scroll the focused code region.

Overview

Light, dark and high contrast

Import

Examples

Line numbers and highlights

Shell

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Examples

Line numbers and highlights

Shell

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related