XDS — Design System

Code@xds/core · XDSCode v0.0.13

Usage

CodeBlock renders syntax-highlighted code with line numbers, a copy button, and optional collapsible sections. Use XDSCodeBlock for multi-line snippets like source files, terminal commands, and configuration examples. Use XDSCode for inline references to function names, variables, or CLI flags within body text.

ts
import {XDSCode} from '@xds/core/CodeBlock'

Best practices

Guidance	Practices
Do	Set the language prop to match the code content so syntax highlighting is accurate. Use "plaintext" when the language is unknown.
Do	Add a title when the code represents a file — it gives readers context and appears in the header bar alongside the copy button.
Do	Use XDSCode for short inline references like function names or CLI flags, and XDSCodeBlock for standalone multi-line snippets.
Don't	Enable line numbers on short snippets (under 5 lines) where they add clutter without helping navigation.
Don't	Nest a code block inside a scrollable container — use the maxHeight prop instead, which handles overflow natively.

Examples

Common configurations, variations, and states.

Code — Content TypesInline code used for variables, terminal commands, CSS properties, file paths, and keyboard shortcuts. Shows how XDSCode adapts to different kinds of technical content.

tsx
'use client';
import {XDSCode} from '@xds/core/CodeBlock';
import {XDSText} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Stack';
export default function CodeVariousContent() {
  return (
    <XDSVStack gap={3}>
      <XDSText type="body">
        Variable: <XDSCode>const count = 0</XDSCode>
      </XDSText>
      <XDSText type="body">
        Terminal: <XDSCode>yarn build --watch</XDSCode>
      </XDSText>
      <XDSText type="body">
        CSS property: <XDSCode>border-radius: 8px</XDSCode>
      </XDSText>
      <XDSText type="body">
        File path: <XDSCode>packages/core/src/CodeBlock/XDSCode.tsx</XDSCode>
      </XDSText>
      <XDSText type="body">
        Keyboard shortcut: <XDSCode>Ctrl+Shift+P</XDSCode>
      </XDSText>
    </XDSVStack>
  );
}

Code — InlineInline code references mixed within a paragraph of body text. Use XDSCode to mark up function names, hooks, or API terms so they stand out from surrounding prose.

tsx
'use client';
import {XDSCode} from '@xds/core/CodeBlock';
import {XDSText} from '@xds/core/Text';
export default function CodeInlineInParagraph() {
  return (
    <XDSText type="body">
      Use <XDSCode>useState</XDSCode> for local state and{' '}
      <XDSCode>useEffect</XDSCode> for side effects. If you need shared state
      across components, consider <XDSCode>useContext</XDSCode> or a state
      management library.
    </XDSText>
  );
}

Code — Text SizesInline code rendered inside heading, body, supporting, and label text. XDSCode automatically matches the font size of its parent text element.

tsx
'use client';
import {XDSCode} from '@xds/core/CodeBlock';
import {XDSText} from '@xds/core/Text';
import {XDSHeading} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Stack';
export default function CodeAcrossTextSizes() {
  return (
    <XDSVStack gap={3}>
      <XDSHeading level={3}>
        Heading with <XDSCode>inline code</XDSCode>
      </XDSHeading>
      <XDSText type="body">
        Body text with <XDSCode>inline code</XDSCode>
      </XDSText>
      <XDSText type="supporting">
        Supporting text with <XDSCode>inline code</XDSCode>
      </XDSText>
      <XDSText type="label">
        Label text with <XDSCode>inline code</XDSCode>
      </XDSText>
    </XDSVStack>
  );
}

Showcase source

tsx
'use client';
import {XDSCode} from '@xds/core/CodeBlock';
import {XDSText} from '@xds/core/Text';
import {XDSStack} from '@xds/core/Layout';
export default function CodeShowcase() {
  return (
    <XDSStack direction="vertical" gap={3}>
      <XDSText type="body">
        Run <XDSCode>npm install @xds/core</XDSCode> to add the package.
      </XDSText>
      <XDSText type="body">
        Use the <XDSCode>variant</XDSCode> prop to switch between{' '}
        <XDSCode>primary</XDSCode>, <XDSCode>secondary</XDSCode>, and{' '}
        <XDSCode>ghost</XDSCode> styles.
      </XDSText>
    </XDSStack>
  );
}

Usage

import {XDSCode} from '@xds/core/CodeBlock'

Best practices

Guidance	Practices
Do	Set the language prop to match the code content so syntax highlighting is accurate. Use "plaintext" when the language is unknown.
Do	Add a title when the code represents a file — it gives readers context and appears in the header bar alongside the copy button.
Do	Use XDSCode for short inline references like function names or CLI flags, and XDSCodeBlock for standalone multi-line snippets.
Don't	Enable line numbers on short snippets (under 5 lines) where they add clutter without helping navigation.
Don't	Nest a code block inside a scrollable container — use the maxHeight prop instead, which handles overflow natively.

tsx

'use client'; import {XDSCode} from '@xds/core/CodeBlock'; import {XDSText} from '@xds/core/Text'; import {XDSVStack} from '@xds/core/Stack'; export default function CodeVariousContent() { return ( <XDSVStack gap={3}> <XDSText type="body"> Variable: <XDSCode>const count = 0</XDSCode> </XDSText> <XDSText type="body"> Terminal: <XDSCode>yarn build --watch</XDSCode> </XDSText> <XDSText type="body"> CSS property: <XDSCode>border-radius: 8px</XDSCode> </XDSText> <XDSText type="body"> File path: <XDSCode>packages/core/src/CodeBlock/XDSCode.tsx</XDSCode> </XDSText> <XDSText type="body"> Keyboard shortcut: <XDSCode>Ctrl+Shift+P</XDSCode> </XDSText> </XDSVStack> ); }

tsx

'use client'; import {XDSCode} from '@xds/core/CodeBlock'; import {XDSText} from '@xds/core/Text'; export default function CodeInlineInParagraph() { return ( <XDSText type="body"> Use <XDSCode>useState</XDSCode> for local state and{' '} <XDSCode>useEffect</XDSCode> for side effects. If you need shared state across components, consider <XDSCode>useContext</XDSCode> or a state management library. </XDSText> ); }

tsx

'use client'; import {XDSCode} from '@xds/core/CodeBlock'; import {XDSText} from '@xds/core/Text'; import {XDSHeading} from '@xds/core/Text'; import {XDSVStack} from '@xds/core/Stack'; export default function CodeAcrossTextSizes() { return ( <XDSVStack gap={3}> <XDSHeading level={3}> Heading with <XDSCode>inline code</XDSCode> </XDSHeading> <XDSText type="body"> Body text with <XDSCode>inline code</XDSCode> </XDSText> <XDSText type="supporting"> Supporting text with <XDSCode>inline code</XDSCode> </XDSText> <XDSText type="label"> Label text with <XDSCode>inline code</XDSCode> </XDSText> </XDSVStack> ); }

tsx

'use client'; import {XDSCode} from '@xds/core/CodeBlock'; import {XDSText} from '@xds/core/Text'; import {XDSStack} from '@xds/core/Layout'; export default function CodeShowcase() { return ( <XDSStack direction="vertical" gap={3}> <XDSText type="body"> Run <XDSCode>npm install @xds/core</XDSCode> to add the package. </XDSText> <XDSText type="body"> Use the <XDSCode>variant</XDSCode> prop to switch between{' '} <XDSCode>primary</XDSCode>, <XDSCode>secondary</XDSCode>, and{' '} <XDSCode>ghost</XDSCode> styles. </XDSText> </XDSStack> ); }