Components / Data display

CodeViewer

Code display with syntax highlighting.

Preview

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="system"13      showLineNumbers14      15    />16  )17}

python

The python style of this component.

user.py

python

1from dataclasses import dataclass2
3@dataclass4class User:5    name: str6    active: bool = True7
8def greet(user: User) -> str:9    return f"Hello, {user.name}!"

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`def greet(name: str) -> str:7    return f"Hello, {name}!"`}8      language="python"9      mode="code"10      variant="github"11      theme="system"12      showLineNumbers13      14    />15  )16}

css

The css style of this component.

theme.css

css

1:root {2  --accent: oklch(0.72 0.17 305);3}4
5.button:hover {6  color: var(--accent);7  transform: translateY(-1px);8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`.button:hover {7  color: var(--accent);8}`}9      language="css"10      mode="code"11      variant="github"12      theme="system"13      showLineNumbers14      15    />16  )17}

json

The json style of this component.

registry.json

json

1{2  "name": "code-viewer",3  "theme": "system",4  "languages": ["tsx", "python", "css"],5  "enabled": true6}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`{7  "theme": "system",8  "enabled": true9}`}10      language="json"11      mode="code"12      variant="github"13      theme="system"14      showLineNumbers15      16    />17  )18}

forest

The forest style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="forest"13      showLineNumbers14      15    />16  )17}

amber

The amber style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="amber"13      showLineNumbers14      15    />16  )17}

ocean

The ocean style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="ocean"13      showLineNumbers14      15    />16  )17}

rose

The rose style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="rose"13      showLineNumbers14      15    />16  )17}

dracula

The dracula style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="dracula"13      showLineNumbers14      15    />16  )17}

night-owl

The night-owl style of this component.

user.ts

typescript

1interface User {2  id: number3  name: string4}5
6export function greet(user: User) {7  return `Hello, ${user.name}!`8}

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`interface User {7  name: string8}`}9      language="typescript"10      mode="code"11      variant="github"12      theme="night-owl"13      showLineNumbers14      15    />16  )17}

command

The command style of this component.

Install component

command

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`npx shadcn@latest add qentrah/DUI/code-viewer`}7      language="bash"8      mode="command"9      variant="terminal"10      theme="system"11      editable12      onRun={(value) => console.log(value)}13    />14  )15}

prompt

The prompt style of this component.

Skill prompt

Paste a problem and run the skill

prompt

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function CodeViewerDemo() {4  return (5    <CodeViewer6      code={`Review this component and suggest a focused fix.`}7      language="typescript"8      mode="prompt"9      variant="illustrative"10      theme="system"11      editable12      onRun={(value) => console.log(value)}13    />14  )15}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/code-viewer

Theming and exact usage

Copy this example directly into a client or server component. Static viewers need no local state; editable command and prompt viewers use onChange and onRun callbacks.

code-viewer-example.tsx

tsx

1import { CodeViewer } from "@/components/ui/code-viewer"2
3export function Example() {4  return (5    <CodeViewer6      code={`const greeting = "Hello, world!"`}7      language="typescript"8      theme="forest"9      title="example.ts"10      showLineNumbers11    />12  )13}

Built-in themes

systemgithubvscodedraculanight-owllightforestamberoceanrose

Design-system syntax tokens

The system theme reads CSS variables at render time. Scope them on a wrapper to create a product theme, or place them in :root to theme every viewer. Each token includes a fallback, so the installed component still renders correctly before customization.

component.tsx

tsx

1<div className="syntax-brand">2  <CodeViewer3    code={source}4    language="tsx"5    theme="system"6  />7</div>

globals.css

css

1.syntax-brand {2  --syntax-foreground: #ecfdf5;3  --syntax-comment: #6b8f71;4  --syntax-punctuation: #a7f3d0;5  --syntax-variable: #5eead4;6  --syntax-property: #86efac;7  --syntax-number: #fde68a;8  --syntax-string: #bef264;9  --syntax-operator: #67e8f9;10  --syntax-keyword: #4ade80;11  --syntax-function: #facc15;12  --syntax-regex: #fb923c;13}

When to use each option

Built-in theme: consistent palette with one prop and no CSS setup.
System theme: syntax colors follow your library tokens and can change per product or container.
customTheme: pass a Prism theme object when token rules or colors must be fully controlled in JavaScript.

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.