Code Block

A flexible composite component for displaying code with syntax highlighting, line numbers, copy functionality, and multi-language support.

Anatomy

Import and assemble the component:

1import { CodeBlock } from '@raystack/apsara'
2

3<CodeBlock>
4  <CodeBlock.Header>
5    <CodeBlock.Label />
6    <CodeBlock.LanguageSelect>
7      <CodeBlock.LanguageSelectTrigger />
8    </CodeBlock.LanguageSelect>
9    <CodeBlock.CopyButton />
10  </CodeBlock.Header>
11  <CodeBlock.Content>
12    <CodeBlock.Code />
13  </CodeBlock.Content>
14  <CodeBlock.CollapseTrigger />
15</CodeBlock>

API Reference

Root

Prop

Type

Header

Prop

Type

Content

Prop

Type

Label

Prop

Type

LanguageSelect

Prop

Type

LanguageSelectTrigger

Prop

Type

CopyButton

Prop

Type

Code

Prop

Type

CollapseTrigger

Prop

Type

Examples

Basic Usage

The most basic usage using CodeBlock with CodeBlock.Code for displaying code content with a floating copy button.

1<CodeBlock>
2  <CodeBlock.Content>
3    <CodeBlock.Code language="jsx">
4      {`function add(a, b) {
5  return a + b;
6}`}
7    </CodeBlock.Code>
8  </CodeBlock.Content>
9</CodeBlock>

With Header

Add a structured header with labels and controls using CodeBlock.Header, CodeBlock.Label, and CodeBlock.CopyButton for better organization and user experience.

1<CodeBlock>
2  <CodeBlock.Header>
3    <CodeBlock.Label>Header Example</CodeBlock.Label>
4    <CodeBlock.CopyButton />
5  </CodeBlock.Header>
6  <CodeBlock.Content>
7    <CodeBlock.Code language="jsx">
8      {`function add(a, b) {
9  return a + b;
10}`}
11    </CodeBlock.Code>
12  </CodeBlock.Content>
13</CodeBlock>

Language Switcher

Support multiple programming languages by including multiple CodeBlock.Code components with different language values. Use CodeBlock.LanguageSelect to provide a dropdown for users to switch between languages. The component automatically displays the code block matching the selected language value, which can be controlled programmatically using the value and onValueChange props.

1<CodeBlock>
2  <CodeBlock.Header>
3    <CodeBlock.Label>Code</CodeBlock.Label>
4    <CodeBlock.LanguageSelect>
5      <CodeBlock.LanguageSelectTrigger />
6      <CodeBlock.LanguageSelectContent>
7        <CodeBlock.LanguageSelectItem value="jsx">
8          JSX
9        </CodeBlock.LanguageSelectItem>
10        <CodeBlock.LanguageSelectItem value="tsx">
11          TSX
12        </CodeBlock.LanguageSelectItem>
13      </CodeBlock.LanguageSelectContent>
14    </CodeBlock.LanguageSelect>
15  </CodeBlock.Header>

No Line Numbers

Hide line numbers by setting the hideLineNumbers prop to true on the root CodeBlock component for a cleaner appearance.

1<CodeBlock hideLineNumbers>
2  <CodeBlock.Content>
3    <CodeBlock.Code language="jsx">
4      {`function add(a, b) {
5  return a + b;
6}`}
7    </CodeBlock.Code>
8  </CodeBlock.Content>
9</CodeBlock>

Collapsible Code

For long code snippets, use the maxLines prop to create collapsible code blocks. When the code exceeds the specified number of lines, a CodeBlock.CollapseTrigger button appears, allowing users to expand or collapse the content.

1<CodeBlock maxLines={10}>
2  <CodeBlock.Content>
3    <CodeBlock.Code language="jsx">
4      {`<Dialog>
5  <Dialog.Trigger render={<Button />}>
6    Basic Dialog
7  </Dialog.Trigger>
8  <Dialog.Content
9    width={300}
10    ariaLabel="Basic Dialog"
11    ariaDescription="A simple dialog example"
12  >
13    <Dialog.Header>
14      <Dialog.Title>A simple dialog example</Dialog.Title>
15    </Dialog.Header>

Copy Button Variants

The CodeBlock.CopyButton component offers two placement options:

  • Floating: Overlays on the code block using variant="floating"
  • Inline: Positioned within the header alongside other controls
1<CodeBlock>
2  <CodeBlock.Content>
3    <CodeBlock.Code language="jsx">
4      {`function add(a, b) {
5  return a + b;
6}`}
7    </CodeBlock.Code>
8    <CodeBlock.CopyButton variant="floating" />
9  </CodeBlock.Content>
10</CodeBlock>

Accessibility

The CodeBlock component is built with accessibility in mind:

  • Keyboard Navigation: All interactive elements support keyboard navigation
  • Screen Reader Support: Proper ARIA labels and semantic roles for screen readers
  • Focus Management: Clear visual focus indicators for keyboard users
  • Color Contrast: Meets WCAG guidelines for sufficient text contrast ratios