CodeBlock

<CodeBlock>TailwindCSS Modules

Premium, self-contained code display with built-in syntax highlighting, line numbers, copy, and documentation-friendly controls — no Prism, Shiki, or Highlight.js required.

InstallationColoxo CLI
npx coloxo add code-block --style coloxo-css
ES Module ImportPlayground / npm package
import { CodeBlock } from '@coloxo/ui';

Design Tokens:

--cx-code-bg--cx-code-keyword--cx-code-string--cx-radius-lg: 12px

1. Variant Matrix

Presentation variants for documentation, terminals, and compact surfaces.

VariantPreview
default
user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
minimal
user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
compact
user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
borderless
user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
elevated
user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
terminal
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}

2. Features

Line numbers, highlighting, focus, wrapping, and collapse — without exposing tokenizer internals.

Line numbers + highlight

user.service.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}

Focus lines

NestJSuser.service.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}

Languages

package.json
JSON
{  "name": "@coloxo/ui",  "version": "1.0.0",  "private": false}
Bash
pnpm add @coloxo/uinpx coloxo add code-block
button.module.css
CSS
.button {  color: var(--cx-brand-600);  border-radius: 8px;}

Expandable

TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}export default user;

3. Interactive Props Configurator

Line numbers

Copy button

Filename

Highlight lines

Word wrap

Visual Render CanvasLANG: TYPESCRIPT | VARIANT: DEFAULT
example.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}
tsx
<CodeBlock  code={`const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");…`}  language="typescript"  filename="example.ts"  showLineNumbers  highlightLines={[3, 4]}/>

4. Dark theme

Token-driven syntax colors follow [data-cx-theme].

user.ts
TypeScript
const user = await getUser("acct_1a2b3c4d5e6f7g8h9i0j_with_a_very_long_identifier");if (user) {  console.log(user.profile);  return user;}

Accessibility

Copy control

Native button with aria-label and polite live region when the clipboard updates.

Selectable source

Line numbers are not selectable or copied — only the original source string is.

Focus

Header actions and expandable controls show Coloxo focus-visible rings.

Props

NameTypeDefaultDescription
codestring—Raw source. Exact string copied to clipboard.
languageCodeLanguageplaintextSyntax grammar id (typescript, json, bash, …).
languageLabelstring—Override display name (e.g. NestJS).
labelstring—Optional header caption (stack/framework).
filenamestring—Optional filename in the header.
variant"default" | "minimal" | "compact" | "borderless" | "elevated" | "terminal"defaultPresentation chrome.
theme"light" | "dark" | "system"systemForced or system theme.
showLineNumbersbooleanfalseAuto-number lines including blanks.
startLinenumber1First displayed line number.
highlightLinesnumber[]—Subtle row highlights.
focusLinesnumber[]—Mute all lines except these.
showCopyButtonbooleantrueHeader copy control.
wordWrapbooleanfalseWrap long lines instead of scrolling.
maxHeightnumber | string—Scrollable viewport height.
maxLinesnumber—Visible lines before collapse.
expandableboolean—Show more / Show less when maxLines is set.