components

Code Area

Display code snippets with syntax highlighting and formatting

Source CodeShikiShiki

Installation

pnpm dlx radianui@latest add code-area

Usage

Imports

/components/ui/code-area.tsx
import { CodeArea } from "@/components/ui/code-area"

Code

/components/ui/code-area.tsx
<CodeArea
	code={
		"const Greeting: React.FC<{ name: string }> = ({ name }) => {\n  return <h1>Hello, {name}!</h1>;\n};"
	}
	language="tsx"
	theme="github-dark-default"
	lineNumbers={false}
	className="h-full w-full"
/>

Examples

Theme

Language

With Tabs

With Copy Button

Code area with copy button

Props

<CodeArea>
NameDefaultValues
code*-string
language-typescriptjavascriptpythonjavacsharphtmlcssjsonmarkdownbash...
themegithub-dark-high-contrastgithub-dark-high-contrastnorddraculasolarized-lightsolarized-dark...
showLineNumbersfalseboolean
External Reference--