> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.
# Code block
> Display syntax-highlighted code with copy functionality and language selection.
The CodeBlock component provides syntax highlighting using Prism, with support for multiple languages, line numbers, copy functionality, and collapsible content.
## Basic usage
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function Example() {
return (
{`function hello() {
console.log('Hello, world!');
}`}
);
}
```
## With header and copy button
Add a header with a label and copy button.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function WithHeader() {
return (
example.js
{`const greeting = 'Hello, world!';
console.log(greeting);`}
);
}
```
## Language selection
Allow users to switch between different code examples.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function MultiLanguage() {
return (
JavaScript
TypeScript
Python
{`function hello() {
console.log('Hello!');
}`}
{`function hello(): void {
console.log('Hello!');
}`}
{`def hello():
print('Hello!')`}
);
}
```
## Collapsible code
Collapse long code blocks to save space.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function CollapsibleCode() {
return (
Long file
{`// 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() {}`}
);
}
```
## Without line numbers
Hide line numbers for cleaner display.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function NoLineNumbers() {
return (
{`npm install @raystack/apsara`}
);
}
```
## Floating copy button
Add a floating copy button that appears on hover.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function FloatingCopy() {
return (
{`interface User {
id: string;
name: string;
email: string;
}`}
);
}
```
## Controlled value
Control the selected language/tab externally.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
import { useState } from 'react';
function ControlledExample() {
const [language, setLanguage] = useState('javascript');
return (
JavaScript
TypeScript
{`console.log('JS');`}
{`console.log('TS');`}
);
}
```
## Custom styling
Apply custom styles and classes.
```tsx theme={null}
import { CodeBlock } from '@raystack/apsara';
function StyledCodeBlock() {
return (
{`// Custom styled code block
const config = {
theme: 'dark',
fontSize: 14
};`}
);
}
```
## 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)
Whether to hide line numbers.
Currently selected language/tab (controlled).
Default selected language/tab (uncontrolled).
Callback when the selected language/tab changes.
Maximum number of lines to show before collapsing.
Maximum height of the code block container.
Whether the code block is collapsed (controlled).
Default collapsed state (uncontrolled).
Callback when the collapsed state changes.
Additional CSS classes to apply.
### CodeBlock.Header
Header content, typically label and copy button.
Additional CSS classes to apply.
### CodeBlock.Content
Content, typically `CodeBlock.Code` elements.
Additional CSS classes to apply.
### CodeBlock.Code
Code content to syntax highlight.
Programming language for syntax highlighting.
Value to match against the CodeBlock's value prop for conditional rendering.
Additional CSS classes to apply.
### CodeBlock.Label
Label content.
Additional CSS classes to apply.
### CodeBlock.CopyButton
Visual variant of the copy button.
Additional CSS classes to apply.
### CodeBlock.CollapseTrigger
Button content. Can be a function that receives the collapsed state.
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.