CodeBlock

A titled code card for documentation.

vite.config.ts

import { defineConfig } from "vite";
import { remix } from "remix/vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	plugins: [remix(), cloudflare()],
});

Terminal

bun add @cloudflare/vite-plugin
installed @cloudflare/vite-plugin@1.14.0
bun run dev

View code

tsx

<CodeBlock
	title="vite.config.ts"
	language="ts"
	code={config}
	add={[3, 6]}
	labels={{ copy: "Copy code", copied: "Copied" }}
/>

<CodeBlock
	title="Terminal"
	language="sh"
	code={"$ bun add @cloudflare/vite-plugin\ninstalled @cloudflare/vite-plugin@1.14.0\n$ bun run dev"}
	labels={{ copy: "Copy code", copied: "Copied" }}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { CodeBlock } from "@sdxc/ui/docs";

Renders the card: a header naming the file (or the language) with the copy button, and the code, which scrolls sideways inside the card. Marked lines tint across the full scroll width with a 2px bar whose width comes out of the line's padding, so no text moves.

Examples

tsx

<CodeBlock title="Terminal" language="sh" code={"$ npm add @sdxc/ui\n$ npm run dev"} labels={labels} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`code`	`string`	Yes	The source as written; a single trailing newline is dropped.
`language`	`string`	No	Language the code highlights as, named the way a fence names it (`ts`, `sh`).
`tokens`	`readonly Token[]`	No	Runs already painted for `code`, which skip highlighting here.
`title`	`string`	No	What the header reads as: a file path draws an icon for its kind, and anything else (such as "Terminal") reads as written. Without one the header names the language, and a block with neither floats its copy button over the code.
`highlight`	`readonly number[]`	No
`add`	`readonly number[]`	No
`remove`	`readonly number[]`	No	Lines a diff removes; they stay on screen and stay off the clipboard.
`lineNumbers`	`boolean`	No	Numbers each line in a gutter, for long listings prose refers to by line.
`labels`	`Labels`	Yes
`codeId`	`string`	No	The `id` of the `<code>` element the copy button targets. Defaults to one derived from the code, which stays the same on every render of the same block.

Also accepts everything in Omit<TagProps<"figure">, "title" | "children">.

Types

Name	Values	What it decides
`Mark`	`"highlight" \| "add" \| "remove"`	How a line is marked: a changed line to look at, or a line a diff adds or removes.