Skip to content
MIZU.

CodeBlock

Selectable source with a real copy action and room for long lines.

Live — this one is real

app.tsx
import { Button } from "mizu-ui";

<Button>Make something</Button>

Usage

import { CodeBlock } from "mizu-ui";

export function Example() {
  return (
    <CodeBlock
      filename="app.tsx"
      language="tsx"
      code={
        'import { Button } from "mizu-ui";\n\n<Button>Make something</Button>'
      }
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect content/Typography.tsx

Source is included in the npm package under src/content/Typography.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
codestring—Complete source text.
language / filenamestring—Caption metadata; no syntax parser is loaded.

Accessibility

Focus the preformatted region to scroll. CopyButton reports clipboard failure. Content is React-escaped, never injected HTML.

Motion

Static source display.

Works alongside

AvatarKbdQuoteProse