Code block with syntax highlighting, a copy button, and collapsible long snippets with configurable expanded height limits.

import { CodeBlock } from "@plexui/ui/components/CodeBlock";

Examples

Overview

import ApiClient from "api-client";
const client = new ApiClient();

const stream = await client.completions.create({
  model: "model-4.1",
  messages: [{ role: "user", content: "Say 'double bubble bath' ten times fast." }],
  stream: true,
});

for await (const chunk of stream) {
  console.log(chunk.choices[0].delta);
}

Collapsible

type Props = { title: string; count: number };

const Header = ({ title, count }: Props) => (
  <h1>{title} ({count})</h1>
);

Expanded by default

type Props = { title: string; count: number };

const Header = ({ title, count }: Props) => (
  <h1>{title} ({count})</h1>
);

Custom collapsed height

interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));

Max expanded height

interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));

Without copy button

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def greet(self):
        print(f"Hi, I'm {self.name}")

Supported languages

import ApiClient from "api-client";
const client = new ApiClient();

const stream = await client.completions.create({
  model: "model-4.1",
  messages: [{ role: "user", content: "Say 'double bubble bath' ten times fast." }],
  stream: true,
});

for await (const chunk of stream) {
  console.log(chunk.choices[0].delta);
}

interface User { id: number; name: string }

const createUser = (id: number, name: string): User => ({ id, name });
console.log(createUser(1, "Alice"));

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def greet(self):
        print(f"Hi, I'm {self.name}")

{
  "user": { "id": 1, "name": "Alice" },
  "roles": ["admin", "editor"],
  "active": true
}

git checkout -b feature/new-feature
git add .
git commit -m "Add new feature"
docker build -t myapp:latest .

.container {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.button:hover { cursor: pointer; }

SELECT u.id, u.name, COUNT(o.id) AS orders_count
FROM users u
JOIN orders o ON u.id = o.user_id
GROUP BY u.id, u.name;

package main

import "fmt"

func main() {
  fmt.Println("Hello, world")
}

API

CodeBlock

Prop	Type	Default	Description
`children`	`string`	—	Code content
`language`	`string`	—	Prism language name
`className`	`string`	—	Additional wrapper class

CollapsibleCodeBlock

Prop	Type	Default	Description
`children`	`string`	—	Code content
`language`	`string`	—	Prism language name
`defaultExpanded`	`boolean`	`false`	Start expanded
`collapsedHeight`	`number`	`140`	Height when collapsed (px)
`maxExpandedHeight`	`number`	—	Max height when expanded (px); taller code scrolls
`copyable`	`boolean`	`true`	Show copy button
`className`	`string`	—	Additional wrapper class

CodeBlockBase (the container), CodeBlockBase.Code (the highlighted <pre>, with language and codeTagProps for the <code> element) and CodeBlockBase.CopyButton (copyValue, loading, disabled) build custom blocks.

Styling

Code Block reads these component tokens. Override them at any scope to restyle it:

--codeblock-background-color: background color (default light-dark(#f9f9f9, #161616))
--codeblock-syntax-1: syntax 1 (default light-dark(#c0660d, var(--yellow-100)))
--codeblock-syntax-2: syntax 2 (default light-dark(var(--blue-500), var(--blue-200)))
--codeblock-syntax-3: syntax 3 (default light-dark(var(--green-600), var(--green-300)))
--codeblock-syntax-4: syntax 4 (default var(--pink-500))
--codeblock-syntax-5: syntax 5 (default light-dark(var(--purple-500), var(--purple-300)))

MarkdownMarkdown renderer for rich formatted content, with headings, lists, tables, code blocks, and KaTeX math expressions out of the box.Markdown EditorCompact rich text editor powered by Tiptap, embedded in a form field, with a markdown formatting toolbar, variants, and an invalid state.Copy TooltipA copy-to-clipboard tooltip that wraps any trigger element and confirms when the value has been copied.

Code Block