Data Display

CodeBlock

Syntax-highlighted code display with optional line numbers, highlighting, and copy.

Props

CodeLanguage is a string union: "ts" | "js" | "tsx" | "jsx" | "json" | "bash" | "sql" | "css" | "yaml" | "text".

CodeBlockProps props

Prop	Type	Default	Description
`code`	`string`	—	The source code string to display.
`language`	`CodeLanguage`	`"text"`	Language for syntax highlighting.
`title`	`ReactNode`	—	File name or label in the header bar.
`showLineNumbers`	`boolean`	—	Shows line numbers in the gutter.
`copyable`	`boolean`	`true`	Shows a copy button.
`highlightLines`	`number[]`	—	1-based line numbers to tint.
`maxLines`	`number`	—	Collapses to this many lines with a toggle.
`wrap`	`boolean`	—	Soft-wrap instead of scrolling horizontally.
`startLine`	`number`	`1`	Starting line number for excerpts.

Examples

interface User {  id: string;  name: string;  role: "admin" | "member";} async function fetchUser(id: string): Promise<User> {  const res = await fetch(`/api/users/${id}`);  return res.json();}

TypeScript

user.tsts

1interface User {2  id: string;3  name: string;4  role: "admin" | "member";5}6 7async function fetchUser(id: string): Promise<User> {8  const res = await fetch(`/api/users/${id}`);9  return res.json();10}

With title and line numbers

interface User {  id: string;  name: string;  role: "admin" | "member";} async function fetchUser(id: string): Promise<User> {  const res = await fetch(`/api/users/${id}`);  return res.json();}

Wrapped

interface User {  id: string;  name: string;  role: "admin" | "member";

Max lines

1interface User {2  id: string;3  name: string;4  role: "admin" | "member";5}6 7async function fetchUser(id: string): Promise<User> {8  const res = await fetch(`/api/users/${id}`);9  return res.json();10}

Highlighted lines

ImportTSX

import { CodeBlock } from "@solarius/onset";
import type { CodeLanguage } from "@solarius/onset";

CodeBlock

PropsCopy link

ExamplesCopy link

Props

Examples