Skip to main content
ninna-ui

Code Block

1 components

Lightweight syntax-highlighted code block with no external highlighting dependencies. Copy-to-clipboard, line numbers, explicit color scheme control, and strict CSP compliance via static CSS.

@ninna-ui/code-block
pnpm add @ninna-ui/code-block

Requires @ninna-ui/core (auto-installed) + CSS setup.

Features

  • ✓Zero external highlighting dependencies — pure regex tokenizer
  • ✓TSX / JSX / CSS / HTML / JSON / Bash language support
  • ✓Copy-to-clipboard button with hover or always-visible mode
  • ✓Optional line numbers
  • ✓colorScheme prop: force light, dark, or auto (follows theme)
  • ✓CSS custom properties (--ninna-cb-*) for per-token color overrides
  • ✓Static CSS — no runtime style injection, strict CSP compatible
  • ✓Full TypeScript support

Quick Start

import { CodeBlock } from "@ninna-ui/code-block";

CSS Setup

After installing, add one extra @import line to your CSS entry point. Without it syntax colors will be missing.

/* your CSS entry point */
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";


/* Required: loads --ninna-cb-* syntax token CSS variables */
@import "@ninna-ui/code-block/styles";