---
title: Code Editor
description: A read-only code display with syntax highlighting, a file header, and optional copying.
icon: terminal
author:
  name: imskyleen
  url: https://github.com/imskyleen
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Animate UI', url: 'https://animate-ui.com/docs/components/code-editor' },
    { name: 'Motion', url: 'https://motion.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/code-editor
```

<ComponentPreview name="code-editor-demo" />

## Usage

```tsx
<CodeEditor lang="tsx">
  {`const a = 1;
const b = 2;
const c = a + b;`}
</CodeEditor>
```

If you want to toggle between light and dark themes, you can use the `theme` prop.

```tsx
<CodeEditor lang="tsx" theme="dark">
  {`const a = 1;
const b = 2;
const c = a + b;`}
</CodeEditor>
```

## When to use

Use CodeEditor for a framed, read-only source example with a file title and optional copying.
Use [Code Comparison](/docs/code-comparison) for side-by-side differences.
CodeEditor does not edit text or animate typing.

Highlighting starts immediately by default. Set `inView` to defer it until the code enters the viewport.
`onDone` runs after highlighting succeeds, not after a typing animation.

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `children` | `string` | - | The code to display in the editor. |
| `lang` | `string` | - | The language of the code. |
| `themes?` | `{ light: string; dark: string }` | `{ light: "github-light-high-contrast"; dark: "github-dark-default" }` | The theme of the code editor (see https://shiki.style/themes). |
| `theme?` | `"light" \| "dark" \| "system"` | `"system"` | Select a palette explicitly, or follow the application theme. |
| `header?` | `boolean` | `true` | Whether to show the header. |
| `dots?` | `boolean` | `true` | Whether to show the top left dots. |
| `icon?` | `React.ReactNode` | - | The icon to display in the header. |
| `inView?` | `boolean` | `false` | Defer highlighting until the code enters the viewport. |
| `inViewMargin?` | `string` | `0px` | The intersection margin used to detect visibility. |
| `inViewOnce?` | `boolean` | `true` | Stop observing visibility after the first viewport entry. |
| `copyButton?` | `boolean` | `false` | Whether to show the copy button. |
| `title?` | `string` | - | The file name. |
| `onDone?` | `() => void` | - | Callback after syntax highlighting succeeds. |
| `onCopy?` | `(content: string) => void` | - | The function to call when copy is successful. |

## Credits

- The component and styling derive from [Animate UI](https://github.com/animate-ui/animate-ui) by [imskyleen](https://github.com/imskyleen).