CSSN'T Components 1.0

code

Codebox

Code block viewer with copy support.

Codebox Examples

Copy-ready examples with live previews.

Basic usage

Render code content inside a styled container.

Live preview

Installation

npm i cssnt_components

Basic

import Codebox from "@/_components/codebox/Codebox";

export default function Example() {
  return (
    <Codebox title="Installation" metaLang="bash">
      npm i cssnt_components
    </Codebox>
  );
}

Variants

Choose between "outlined", "elevated", and "dark".

Live preview

Outlined (default)

export function sum(a: number, b: number) {
  return a + b;
}

Elevated

export function sum(a: number, b: number) {
  return a + b;
}

Dark

export function sum(a: number, b: number) {
  return a + b;
}

Variants

import Codebox from "@/packages/ui/src/_components/codebox/Codebox";

export default function Example() {
  const code = `export function sum(a: number, b: number) {
  return a + b;
}`;

  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Codebox title="Outlined (default)" metaLang="ts" maxHeight="160px">
        {code}
      </Codebox>

      <Codebox title="Elevated" metaLang="ts" variant="elevated" maxHeight="160px">
        {code}
      </Codebox>

      <Codebox title="Dark" metaLang="ts" variant="dark" maxHeight="160px">
        {code}
      </Codebox>
    </div>
  );
}

Sizes

Size maps to paddings/typography: "small" | "medium" | "large".

Live preview

Small

const tokens = {
  radius: 12,
  space: 8,
  font: "system-ui",
};

Medium

const tokens = {
  radius: 12,
  space: 8,
  font: "system-ui",
};

Large

const tokens = {
  radius: 12,
  space: 8,
  font: "system-ui",
};

Sizes

import Codebox from "@/packages/ui/src/_components/codebox/Codebox";

export default function Example() {
  const code = `const tokens = {
  radius: 12,
  space: 8,
  font: "system-ui",
};`;

  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Codebox title="Small" metaLang="ts" size="small" maxHeight="140px">
        {code}
      </Codebox>

      <Codebox title="Medium" metaLang="ts" size="medium" maxHeight="140px">
        {code}
      </Codebox>

      <Codebox title="Large" metaLang="ts" size="large" maxHeight="140px">
        {code}
      </Codebox>
    </div>
  );
}

Scrolling (maxHeight)

Use maxHeight to constrain tall snippets and enable internal scrolling.

Live preview

Scrollable code

// Long snippet to validate scroll + copy.

console.log("line 1");
console.log("line 2");
console.log("line 3");
console.log("line 4");
console.log("line 5");
console.log("line 6");
console.log("line 7");
console.log("line 8");
console.log("line 9");
console.log("line 10");
console.log("line 11");
console.log("line 12");
console.log("line 13");
console.log("line 14");
console.log("line 15");
console.log("line 16");
console.log("line 17");
console.log("line 18");
console.log("line 19");
console.log("line 20");
console.log("line 21");
console.log("line 22");
console.log("line 23");
console.log("line 24");
console.log("line 25");
console.log("line 26");
console.log("line 27");
console.log("line 28");
console.log("line 29");
console.log("line 30");

Scrollable snippet

import { useMemo } from "react";
import Codebox from "@/_components/codebox/Codebox";

export default function Example() {
  const longCode = useMemo(
    () =>
      `// Long snippet to validate scroll + copy.

` +
      Array.from({ length: 30 })
        .map((_, i) => `console.log("line ${i + 1}");`)
        .join("
"),
    []
  );

  return (
    <Codebox title="Scrollable code" metaLang="js" maxHeight="180px">
      {longCode}
    </Codebox>
  );
}

Copy button (showCopy)

Enables clipboard copy and shows a small toast (AlertStack + Alert).

• Copy currently works only when children is a string.

• The component has an onCopy prop but it is currently not invoked by the implementation.

Live preview

Copy enabled

import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Demo() {
  return (
    <Button variant="secondary" ripple outline size="small">
      Save
    </Button>
  );
}

Copy enabled

import Codebox from "@/_components/codebox/Codebox";

export default function Example() {
  const snippet = `import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Demo() {
  return (
    <Button variant="secondary" ripple outline size="small">
      Save
    </Button>
  );
}`;

  return (
    <Codebox title="Copy enabled" metaLang="tsx" showCopy maxHeight="240px">
      {snippet}
    </Codebox>
  );
}

Live preview

Copy works only when children is a string.

String children (copy works)

export const isStringCopySupported = true;

ReactNode children (copy will be empty)

const x = 1; // ReactNode

String-only copy

import Codebox from "@/packages/ui/src/_components/codebox/Codebox";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div>Copy works only when children is a string.</div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <Codebox title="String children (copy works)" metaLang="ts" showCopy maxHeight="120px">
          {"export const isStringCopySupported = true;"}
        </Codebox>

        <Codebox title="ReactNode children (copy will be empty)" metaLang="tsx" showCopy maxHeight="120px">
          <span>
            {"const x = 1;"} <strong>{"// ReactNode"}</strong>
          </span>
        </Codebox>
      </div>
    </div>
  );
}

Controlled content (playground pattern)

Swap snippets using state, useful in docs pages.

Live preview

Install

npm i cssnt_components
# or
pnpm add cssnt_components

Switch snippets

import { useMemo, useState } from "react";
import Codebox from "@/packages/ui/src/_components/codebox/Codebox";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

export default function Example() {
  const presets = useMemo(
    () => [
      { id: "install", title: "Install", lang: "bash", code: "npm i cssnt_components
# or
pnpm add cssnt_components" },
      { id: "import", title: "Import", lang: "tsx", code: 'import Codebox from "@/_components/codebox/Codebox";' },
      { id: "example", title: "Example", lang: "tsx", code: "export default function Example() { return null; }" },
    ],
    []
  );

  const [currentId, setCurrentId] = useState("install");
  const current = presets.find((p) => p.id === currentId) ?? presets[0];

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
        {presets.map((p) => (
          <Button key={p.id} variant="secondary" ripple outline size="small" onClick={() => setCurrentId(p.id)}>
            {p.title}
          </Button>
        ))}
      </div>

      <Codebox title={current.title} metaLang={current.lang} showCopy maxHeight="200px">
        {current.code}
      </Codebox>
    </div>
  );
}

On this page

Codebox Props

Codebox — Props
PropTypeRequiredDefaultDescription
childrenReact.ReactNodeNo—Code content to render inside <pre><code>. For copy support, pass a string (ReactNode copy may be empty).
titlestringNo—Optional header text (also used as aria-label fallback).
metaLangstringNo—Optional language label shown as a Chip in the header (e.g. "tsx", "bash").
variant"outlined" | "elevated" | "dark"No"outlined"Visual style of the Codebox container (mapped to CSS classes).
size"small" | "medium" | "large"No"medium"Size preset for paddings/typography (mapped to CSS classes).
showCopybooleanNofalseIf true, renders the Copy button and enables clipboard copy + toast.
onCopy() => voidNo—Reserved callback. Currently not invoked by the component implementation.
maxHeightstringNo"auto"Max height applied to the <pre> element (e.g. "240px").
classNamestringNo—Extra className appended to the root element.