Skip to main content
The CodeBlock component provides syntax highlighting using Prism, with support for multiple languages, line numbers, copy functionality, and collapsible content.

​
Basic usage

import { CodeBlock } from '@raystack/apsara';

function Example() {
  return (
    <CodeBlock>
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript">
          {`function hello() {
  console.log('Hello, world!');
}`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
With header and copy button

Add a header with a label and copy button. 
import { CodeBlock } from '@raystack/apsara';

function WithHeader() {
  return (
    <CodeBlock>
      <CodeBlock.Header>
        <CodeBlock.Label>example.js</CodeBlock.Label>
        <CodeBlock.CopyButton />
      </CodeBlock.Header>
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript">
          {`const greeting = 'Hello, world!';
console.log(greeting);`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Language selection

Allow users to switch between different code examples. 
import { CodeBlock } from '@raystack/apsara';

function MultiLanguage() {
  return (
    <CodeBlock defaultValue="javascript">
      <CodeBlock.Header>
        <CodeBlock.LanguageSelect>
          <CodeBlock.LanguageSelectTrigger />
          <CodeBlock.LanguageSelectContent>
            <CodeBlock.LanguageSelectItem value="javascript">
              JavaScript
            </CodeBlock.LanguageSelectItem>
            <CodeBlock.LanguageSelectItem value="typescript">
              TypeScript
            </CodeBlock.LanguageSelectItem>
            <CodeBlock.LanguageSelectItem value="python">
              Python
            </CodeBlock.LanguageSelectItem>
          </CodeBlock.LanguageSelectContent>
        </CodeBlock.LanguageSelect>
        <CodeBlock.CopyButton />
      </CodeBlock.Header>
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript" value="javascript">
          {`function hello() {
  console.log('Hello!');
}`}
        </CodeBlock.Code>
        <CodeBlock.Code language="typescript" value="typescript">
          {`function hello(): void {
  console.log('Hello!');
}`}
        </CodeBlock.Code>
        <CodeBlock.Code language="python" value="python">
          {`def hello():
    print('Hello!')`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Collapsible code

Collapse long code blocks to save space. 
import { CodeBlock } from '@raystack/apsara';

function CollapsibleCode() {
  return (
    <CodeBlock maxLines={5} defaultCollapsed={true}>
      <CodeBlock.Header>
        <CodeBlock.Label>Long file</CodeBlock.Label>
        <CodeBlock.CopyButton />
      </CodeBlock.Header>
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript">
          {`// This is a long code file
function line1() {}
function line2() {}
function line3() {}
function line4() {}
function line5() {}
function line6() {}
function line7() {}
function line8() {}
function line9() {}
function line10() {}`}
        </CodeBlock.Code>
        <CodeBlock.CollapseTrigger />
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Without line numbers

Hide line numbers for cleaner display. 
import { CodeBlock } from '@raystack/apsara';

function NoLineNumbers() {
  return (
    <CodeBlock hideLineNumbers>
      <CodeBlock.Content>
        <CodeBlock.Code language="bash">
          {`npm install @raystack/apsara`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Floating copy button

Add a floating copy button that appears on hover. 
import { CodeBlock } from '@raystack/apsara';

function FloatingCopy() {
  return (
    <CodeBlock>
      <CodeBlock.Content>
        <CodeBlock.Code language="typescript">
          {`interface User {
  id: string;
  name: string;
  email: string;
}`}
        </CodeBlock.Code>
        <CodeBlock.CopyButton variant="floating" />
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Controlled value

Control the selected language/tab externally. 
import { CodeBlock } from '@raystack/apsara';
import { useState } from 'react';

function ControlledExample() {
  const [language, setLanguage] = useState('javascript');

  return (
    <CodeBlock value={language} onValueChange={setLanguage}>
      <CodeBlock.Header>
        <CodeBlock.LanguageSelect>
          <CodeBlock.LanguageSelectTrigger />
          <CodeBlock.LanguageSelectContent>
            <CodeBlock.LanguageSelectItem value="javascript">
              JavaScript
            </CodeBlock.LanguageSelectItem>
            <CodeBlock.LanguageSelectItem value="typescript">
              TypeScript
            </CodeBlock.LanguageSelectItem>
          </CodeBlock.LanguageSelectContent>
        </CodeBlock.LanguageSelect>
      </CodeBlock.Header>
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript" value="javascript">
          {`console.log('JS');`}
        </CodeBlock.Code>
        <CodeBlock.Code language="typescript" value="typescript">
          {`console.log('TS');`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Custom styling

Apply custom styles and classes. 
import { CodeBlock } from '@raystack/apsara';

function StyledCodeBlock() {
  return (
    <CodeBlock className="custom-code-block" maxHeight="300px">
      <CodeBlock.Content>
        <CodeBlock.Code language="javascript">
          {`// Custom styled code block
const config = {
  theme: 'dark',
  fontSize: 14
};`}
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock>
  );
}

​
Supported languages

CodeBlock supports all languages provided by Prism React Renderer, including:
  • JavaScript / TypeScript
  • Python
  • Java
  • Go
  • Rust
  • Ruby
  • PHP
  • C / C++
  • C#
  • Swift
  • Kotlin
  • HTML / CSS
  • SQL
  • Bash / Shell
  • And many more

​
API reference

​
CodeBlock (root)

​
hideLineNumbers
boolean
default:"false"
Whether to hide line numbers.
​
value
string
Currently selected language/tab (controlled).
​
defaultValue
string
Default selected language/tab (uncontrolled).
​
onValueChange
(value: string) => void
Callback when the selected language/tab changes.
​
maxLines
number
Maximum number of lines to show before collapsing.
​
maxHeight
string | number
Maximum height of the code block container.
​
collapsed
boolean
Whether the code block is collapsed (controlled).
​
defaultCollapsed
boolean
default:"true"
Default collapsed state (uncontrolled).
​
onCollapseChange
(value: boolean) => void
Callback when the collapsed state changes.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.Header

​
children
ReactNode
required
Header content, typically label and copy button.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.Content

​
children
ReactNode
required
Content, typically CodeBlock.Code elements.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.Code

​
children
string
required
Code content to syntax highlight.
​
language
Language
required
Programming language for syntax highlighting.
​
value
string
Value to match against the CodeBlock’s value prop for conditional rendering.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.Label

​
children
ReactNode
required
Label content.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.CopyButton

​
variant
'default' | 'floating'
default:"'default'"
Visual variant of the copy button.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.CollapseTrigger

​
children
ReactNode | ((collapsed: boolean) => ReactNode)
Button content. Can be a function that receives the collapsed state.
​
className
string
Additional CSS classes to apply.

​
CodeBlock.LanguageSelect

Wrapper for the language selection dropdown. See Select component documentation for full API.

​
CodeBlock.LanguageSelectTrigger

Trigger button for the language dropdown.

​
CodeBlock.LanguageSelectContent

Dropdown content container.

​
CodeBlock.LanguageSelectItem

Individual language option in the dropdown.