Code

Shiki-highlighted code that follows light and dark through light-dark() token colors, as a block, an inline one-liner or a tabbed file panel. Line numbers (from any start line), tinted lines with an accent bar, <mark>ed words or column ranges, and per-line notes in a tooltip that keyboard users can tab to. Optional Prettier at display time; copy hands out exactly what is shown.

npx @kznlabs/labsui add code

1import { Elysia, t } from "elysia";2import { cors } from "@elysiajs/cors";Remember to add it: bun add @elysiajs/cors3import { db } from "./db";45const app = new Elysia()6  .use(cors())7  .get("/clips", () => db.clips.list())8  .post("/clips", ({ body }) => db.clips.create(body), {The schema validates the body and types it for the handler.9    body: t.Object({10      title: t.String({ minLength: 1 }),11      url: t.String({ format: "uri" }),12    }),13  })14  .listen(3000);1516console.log(`Clips API on :${app.server?.port}`);

import { Code } from "@/components/ui/code";const server = `import { Elysia, t } from "elysia";import { cors } from "@elysiajs/cors";new Elysia()  .use(cors())  .post("/clips", ({ body }) => body, {    body: t.Object({ title: t.String() }),  })  .listen(3000);`;export function ServerSnippet() {  return (    <Code      code={server}      language="ts"      lineNumbers      highlight={[[6, 8]]}      marks={["t.Object", { line: 9, start: 2, end: 15 }]}      notes={{ 2: "Remember to add it: bun add @elysiajs/cors" }}    />  );}

import { Code } from "@/components/ui/code";// An excerpt from line 42 of a file: numbers, highlights and notes use the shown numbers.export function Excerpt({ code }: { code: string }) {  return <Code code={code} language="ts" lineNumbers={42} highlight={[44]} />;}

<Code>

Syntax-highlighted code with light/dark themes, line annotations and an in-place copy button.

code*
string
Source to highlight.
format
boolean
Run Prettier (default options) before highlighting; copy gets the formatted code too. Line numbers in highlight, marks and notes refer to the formatted code.
highlight
LineRange[]
Lines to tint, with a primary bar on the left.
languagedefault "tsx"
string
Shiki language id, e.g. "tsx", "bash", "json".
lineNumbers
number | boolean
Gutter numbers; a number sets the first line's number (for excerpts).
marks
CodeMark[]
Words or ranges inside lines, wrapped in <mark>.
notes
Record<number, ReactNode>
Hover/focus note per line number: { 4: "Remember to add it to the registry" }.
tokens
CodeToken[][]
Lines from highlightCode(code, language), made on the server or at build time: the code renders highlighted from the first paint and Shiki never loads. Ignored with format.
variantdefault "block"
"block" | "inline"
"block": header with language and copy. "inline": one line with a copy button.

Prop	Type	Default
`code*` Source to highlight.	`string`	—
`format` Run Prettier (default options) before highlighting; copy gets the formatted code too. Line numbers in `highlight`, `marks` and `notes` refer to the formatted code.	`boolean`	—
`highlight` Lines to tint, with a primary bar on the left.	`LineRange[]`	—
`language` Shiki language id, e.g. "tsx", "bash", "json".	`string`	`"tsx"`
`lineNumbers` Gutter numbers; a number sets the first line's number (for excerpts).	`number \| boolean`	—
`marks` Words or ranges inside lines, wrapped in <mark>.	`CodeMark[]`	—
`notes` Hover/focus note per line number: `{ 4: "Remember to add it to the registry" }`.	`Record<number, ReactNode>`	—
`tokens` Lines from `highlightCode(code, language)`, made on the server or at build time: the code renders highlighted from the first paint and Shiki never loads. Ignored with `format`.	`CodeToken[][]`	—
`variant` "block": header with language and copy. "inline": one line with a copy button.	`"block" \| "inline"`	`"block"`

<CopyButton>

Ghost "Copy" button that turns into "Copied" in place. Shared with Terminal.

code*
string
Text written to the clipboard.
labeldefault "Copy code"
string
Accessible name of the button.

Prop	Type	Default
`code*` Text written to the clipboard.	`string`	—
`label` Accessible name of the button.	`string`	`"Copy code"`

<CodePanel>

File panel: one tab per file, copy for the active one. Every file stays in the DOM.

files*
CodeFile[]
One tab per file, each with its own annotations. Switching animates the body.
collapse
number
Fold files longer than this many lines (by at least 5) behind a "Show all" button. The body never scrolls vertically, so the wheel and touch keep scrolling the page.
format
boolean
Run Prettier on JS/TS files before highlighting; copy gets the formatted code too.

Prop	Type	Default
`files*` One tab per file, each with its own annotations. Switching animates the body.	`CodeFile[]`	—
`collapse` Fold files longer than this many lines (by at least 5) behind a "Show all" button. The body never scrolls vertically, so the wheel and touch keep scrolling the page.	`number`	—
`format` Run Prettier on JS/TS files before highlighting; copy gets the formatted code too.	`boolean`	—

type LineRange: number | [from: number, to: number]
type CodeMark: | string | { text: string; line?: number } | { line: number; start: number; end: number }
type CodeFile: Annotations & { name: string; code: string; tokens?: CodeToken[][]; }

* required. Every component also takes className.