Code Editor
A read-only code display with syntax highlighting, a file header, and optional copying.
Powered by
Animate UI
MotionInstallation
npx shadcn@latest add @redpanda/code-editorpnpm dlx shadcn@latest add @redpanda/code-editoryarn dlx shadcn@latest add @redpanda/code-editorbunx shadcn@latest add @redpanda/code-editornubx shadcn@latest add @redpanda/code-editoraube dlx shadcn@latest add @redpanda/code-editorUsage
<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.
<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 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
childrenstring
The code to display in the editor.
stringlangstring
The language of the code.
stringthemes?{ light: string; dark: string }
The theme of the code editor (see https://shiki.style/themes).
{ light: string; dark: string }{ light: "github-light-high-contrast"; dark: "github-dark-default" }theme?"light" | "dark" | "system"
Select a palette explicitly, or follow the application theme.
"light" | "dark" | "system""system"header?boolean
Whether to show the header.
booleantruedots?boolean
Whether to show the top left dots.
booleantrueicon?React.ReactNode
The icon to display in the header.
React.ReactNodeinView?boolean
Defer highlighting until the code enters the viewport.
booleanfalseinViewMargin?string
The intersection margin used to detect visibility.
string0pxinViewOnce?boolean
Stop observing visibility after the first viewport entry.
booleantruecopyButton?boolean
Whether to show the copy button.
booleanfalsetitle?string
The file name.
stringonDone?() => void
Callback after syntax highlighting succeeds.
() => voidonCopy?(content: string) => void
The function to call when copy is successful.
(content: string) => voidCredits
- The component and styling derive from Animate UI by imskyleen.