Code Block

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

Usage

import { CodeBlock } from '@raystack/apsara'

Component Structure

The CodeBlock component uses a composite pattern, providing modular sub-components for flexible code display:

CodeBlock - Root container that manages state and context
CodeBlock.Header - Optional header section for labels and controls
CodeBlock.Content - Main content area containing code blocks
CodeBlock.Label - Text label displayed in the header
CodeBlock.Code - Individual code block with syntax highlighting
CodeBlock.CopyButton - Copy functionality (floating or inline variants)
CodeBlock.LanguageSelect - Language selection dropdown container
CodeBlock.LanguageSelectTrigger - Button to open language selection
CodeBlock.LanguageSelectContent - Language select content container
CodeBlock.LanguageSelectItem - Individual language option
CodeBlock.CollapseTrigger - Button to expand/collapse long code blocks

API Reference

CodeBlock Props

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`((value: string) => void)`	-
`hideLineNumbers`	`boolean`	`false`
`maxLines`	`number`	`0`
`collapsed`	`boolean`	-
`defaultCollapsed`	`boolean`	`true`
`onCollapseChange`	`((collapsed: boolean) => void)`	-
`children`	`ReactNode`	-
`className`	`string`	-

CodeBlock.Header Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

CodeBlock.Content Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

CodeBlock.Label Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

CodeBlock.LanguageSelect Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

CodeBlock.LanguageSelectTrigger Props

Prop	Type	Default
`className`	`string`	-

CodeBlock.CopyButton Props

Prop	Type	Default
`variant`	`"floating" \| "default"`	`"default"`
`className`	`string`	-

CodeBlock.Code Props

Prop	Type	Default
`language`	`string`	-
`value`	`string`	-
`children`	`string`	-
`className`	`string`	-

CodeBlock.CollapseTrigger Props

Prop	Type	Default
`children`	`ReactNode`	`"Show Code"`
`className`	`string`	-

Examples

Basic Usage

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

<CodeBlock>
  <CodeBlock.Content>
    <CodeBlock.Code language="jsx">
      {`function add(a, b) {
  return a + b;
}`}
    </CodeBlock.Code>
  </CodeBlock.Content>
</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.

<CodeBlock>
  <CodeBlock.Header>
    <CodeBlock.Label>Header Example</CodeBlock.Label>
    <CodeBlock.CopyButton />
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.Code language="jsx">
      {`function add(a, b) {
  return a + b;
}`}
    </CodeBlock.Code>
  </CodeBlock.Content>
</CodeBlock>

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.

<CodeBlock>
  <CodeBlock.Header>
    <CodeBlock.Label>Code</CodeBlock.Label>
    <CodeBlock.LanguageSelect>
      <CodeBlock.LanguageSelectTrigger />
      <CodeBlock.LanguageSelectContent>
        <CodeBlock.LanguageSelectItem value="jsx">
          JSX
        </CodeBlock.LanguageSelectItem>
        <CodeBlock.LanguageSelectItem value="tsx">
          TSX
        </CodeBlock.LanguageSelectItem>
      </CodeBlock.LanguageSelectContent>
    </CodeBlock.LanguageSelect>
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.Code language="tsx">{`function add(a, b) {
  return a + b;
}`}</CodeBlock.Code>
    <CodeBlock.Code language="jsx">{`function add(a: number, b: number): number {
  return a + b;
}`}</CodeBlock.Code>
  </CodeBlock.Content>
</CodeBlock>

No Line Numbers

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

<CodeBlock hideLineNumbers>
  <CodeBlock.Content>
    <CodeBlock.Code language="jsx">
      {`function add(a, b) {
  return a + b;
}`}
    </CodeBlock.Code>
  </CodeBlock.Content>
</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.

<CodeBlock maxLines={10}>
  <CodeBlock.Content>
    <CodeBlock.Code language="jsx">
      {`<Dialog>
  <Dialog.Trigger asChild>
    <Button>Basic Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width={300}
    ariaLabel="Basic Dialog"
    ariaDescription="A simple dialog example"
  >
    <Dialog.Header>
      <Dialog.Title>A simple dialog example</Dialog.Title>
      <Dialog.CloseButton />
    </Dialog.Header>
    <Dialog.Body>
      <Dialog.Description>
        This is a basic dialog with title and description.
      </Dialog.Description>
    </Dialog.Body>
    <Dialog.Footer>
      <Button>OK</Button>
      <Dialog.Close asChild>
        <Button color="neutral">Cancel</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>`}
    </CodeBlock.Code>
    <CodeBlock.CollapseTrigger />
  </CodeBlock.Content>
</CodeBlock>

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

<CodeBlock>
  <CodeBlock.Content>
    <CodeBlock.Code language="jsx">
      {`function add(a, b) {
  return a + b;
}`}
    </CodeBlock.Code>
    <CodeBlock.CopyButton variant="floating" />
  </CodeBlock.Content>
</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

Code BlocknewNEW