Code Area

Display code snippets with syntax highlighting and formatting

Source Code

Shiki

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

Name	Default	Values
code*	-	string
language	-	typescriptjavascriptpythonjavacsharphtmlcssjsonmarkdownbash...
theme	github-dark-high-contrast	github-dark-high-contrastnorddraculasolarized-lightsolarized-dark...
showLineNumbers	false	boolean
External Reference	-	-