Code Editor

// Plain markup
import { CodeEditor } from "@shavin/ui";

Interactive Code Editor

Full-featured code input field with scoped dark/light theme switching, filename header, language badge, and real-time line/char counters.

MetricCard.tsxReact TSX

import React from "react";
import { Button, Card, Heading, Text } from "@shavin/ui";

export function MetricCard() {
  return (
    <Card className="p-6 rounded-[var(--radius-panel)] border border-hairline bg-surface">
      <Heading size="3">System Telemetry</Heading>
      <Text size="2" color="muted">Real-time edge metrics</Text>
      <Button variant="solid" size="sm" className="mt-3">View Audit</Button>
    </Card>
  );
}

Accessible Radix primitives and semantic tokens supported.12 lines · 430 chars

Full-featured code input field with scoped dark/light theme switching, filename header, language badge, and real-time line/char counters.

import { CodeEditor } from "@shavin/ui";

<CodeEditor
  value={code}
  onChange={setCode}
  filename="MetricCard.tsx"
  language="React TSX"
  allowThemeToggle
/>

Light Theme Scoped Mode

Code editor explicitly set to light theme mode without altering the surrounding platform appearance.

config.tsTypeScript

export const config = { cluster: "us-east-1", replicas: 3 };

Accessible Radix primitives and semantic tokens supported.1 line · 60 chars

Code editor explicitly set to light theme mode without altering the surrounding platform appearance.

<CodeEditor
  value={`export const config = { cluster: "us-east-1", replicas: 3 };`}
  theme="light"
  filename="config.ts"
  language="TypeScript"
/>

Read-Only Code Input

Displays immutable code with copy capabilities and custom footer metadata.

Example.tsxReact TSX

import { Stepper } from "@shavin/ui";

export function Wizard() {
  return <Stepper steps={[{ title: "Step 1" }, { title: "Step 2" }]} current={0} />;
}

import { Stepper } from "@shavin/ui";

export function Wizard() {
  return <Stepper steps={[{ title: "Step 1" }, { title: "Step 2" }]} current={0} />;
}

Accessible Radix primitives and semantic tokens supported.5 lines · 152 chars

Displays immutable code with copy capabilities and custom footer metadata.

<CodeEditor
  value={`import { Stepper } from "@shavin/ui";`}
  readOnly
  filename="Example.tsx"
/>

Prop	Type	Default	Description
value*	string	—	Source code string to edit or display.
onChange	(value: string) => void	—	Callback fired when code changes.
filename	string	—	Filename shown in the top header bar.
language	string	—	Language identifier badge (e.g. 'React TSX', 'TypeScript', 'JSON').
showLanguage	boolean	true	Whether to show the language badge on the editor header. Default true.
hideHeader	boolean	false	Option to hide the top header bar completely. Default false.
showHeader	boolean	true	Option to show header (alias for !hideHeader). Default true.
theme	"dark" \| "light" \| "auto"	—	Scoped theme mode for the editor box: 'dark' \| 'light' \| 'auto'. In 'auto', defaults to dark IDE theme.
allowThemeToggle	boolean	—	Allow users to toggle between dark and light themes within the editor container.
readOnly	boolean	—	Whether the code editor is read-only.
placeholder	string	—	Placeholder text shown when editor is empty.
minHeight	number \| string	—	Minimum height for the editor in pixels or CSS unit.
copyable	boolean	—	Whether to show a one-click Copy button in the header bar.
headerLeft	ReactNode	—	Custom content rendered on the left side of the header bar.
headerRight	ReactNode	—	Custom content rendered on the right side of the header bar.
footer	ReactNode	—	Custom footer node rendered below the editor.
className	string	—	Custom wrapper class name.

* required