@ninna-ui/code-block

Syntax-highlighted code block component for Ninna-UI with copy-to-clipboard, line numbers, and automatic dark mode.

📖 Full Documentation →  |  📦 npm →  |  🐙 GitHub →

A standalone code display component for Ninna UI — built-in syntax highlighting for TSX/JSX/CSS/HTML and more, copy-to-clipboard button, optional line numbers, and automatic light/dark mode theming via oklch colors.

No external syntax highlighting library required. The component uses a lightweight regex-based tokenizer — no Prism, no Shiki, no heavy dependencies.

Installation

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

CSS Setup

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

Quick Start

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

function Example() {
  return (
    <CodeBlock
      code={`import { Button } from "@ninna-ui/primitives";

export function App() {
  return <Button color="primary">Click me</Button>;
}`}
      language="tsx"
      showLineNumbers
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | — | The source code to display | | language | CodeBlockLanguage | "tsx" | Syntax highlighting language | | showLineNumbers | boolean | false | Show line numbers | | showCopyButton | boolean | true | Show copy-to-clipboard button | | copyButtonAlwaysVisible | boolean | false | Keep copy button visible (vs hover-only) | | className | string | — | Additional CSS classes |

Supported Languages

type CodeBlockLanguage =
  | "tsx" | "jsx" | "typescript" | "javascript"
  | "css" | "html" | "json" | "bash"
  | "markdown" | "plaintext";

Set language="plaintext" to disable syntax highlighting entirely.

Features

• Lightweight tokenizer — Regex-based, no Prism/Shiki dependency
• Automatic dark mode — oklch syntax colors adapt to light/dark theme
• Copy to clipboard — One-click copy with visual feedback
• Line numbers — Optional, styled to not interfere with code selection
• data-slot API — Target code-block, code-content, copy-button for CSS overrides

All Exports

import {
  CodeBlock,
  type CodeBlockProps,
  type CodeBlockLanguage,
} from "@ninna-ui/code-block";

Related Packages

• @ninna-ui/core — Design tokens and theme presets (required)
• @ninna-ui/primitives — Inline Code component for short snippets
• All packages — Complete package list

License

MIT