CodeBlock

A syntax-highlighted code display component with language support and copy functionality.

Import

tsx

import { CodeBlock } from '@tac-ui/web';

Playground

Interactively configure the CodeBlock props below.

tsx

import { Button } from '@tac-ui/web';

export function Demo() {
  return <Button variant="primary">Click me</Button>;
}

Language

Glass

tsx

<CodeBlock language="tsx" code={...} />

TypeScript Example

Render TypeScript or TSX code with a language label in the header bar and a one-click copy-to-clipboard button.

tsx

import { Badge } from '@tac-ui/web';

interface StatusProps {
  status: 'active' | 'inactive' | 'pending';
}

export function StatusBadge({ status }: StatusProps) {
  const variantMap = {
    active: 'success',
    inactive: 'error',
    pending: 'warning',
  } as const;

  return (
    <Badge variant={variantMap[status]}>
      {status.charAt(0).toUpperCase() + status.slice(1)}
    </Badge>
  );
}

tsx

<CodeBlock
  language="tsx"
  code={`import { Badge } from '@tac-ui/web';

export function StatusBadge({ status }) {
  return <Badge variant="success">{status}</Badge>;
}`}
/>

CSS Color Tokens

Display CSS color tokens and theme variables with syntax-specific styling in the header.

css

/* Theme Color Tokens */
--primary: #6366f1;
--primary-foreground: #ffffff;
--secondary: #f1f5f9;
--secondary-foreground: #0f172a;

/* Semantic Colors */
--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;

/* Surface Colors */
--background: #ffffff;
--foreground: #0f172a;
--card: #ffffff;
--border: #e2e8f0;
--muted-foreground: #64748b;

tsx

<CodeBlock
  language="css"
  code={`/* Theme Color Tokens */
--primary: #6366f1;
--success: #22c55e;
--warning: #f59e0b;
--error: #ef4444;`}
/>

Bash Example

Shell commands rendered with a bash label, suitable for installation instructions or CLI documentation.

bash

# Install tac-ui
npm install @tac-ui/web

# Or with pnpm
pnpm add @tac-ui/web

# Start the dev server
npm run dev

tsx

<CodeBlock
  language="bash"
  code={`npm install @tac-ui/web`}
/>

Glass Variant

The glass prop applies backdrop-blur glassmorphism styling — transparent background with saturated blur — ideal for overlaying code on visual backgrounds.

tsx

import { CodeBlock } from '@tac-ui/web';

export function InstallCommand() {
  return (
    <CodeBlock
      glass
      language="bash"
      code="pnpm add @tac-ui/web"
    />
  );
}

tsx

<CodeBlock
  glass
  language="tsx"
  code={`import { CodeBlock } from '@tac-ui/web';`}
/>

API Reference

Prop	Type	Default	Description
code	string	-	The source code string to display. Required.
language	string	-	Language label shown in the header bar (e.g. "tsx", "bash", "css"). Does not affect syntax highlighting.
glass	boolean	false	When true, applies glassmorphism styling with backdrop blur and saturated transparency.
className	string	-	Additional CSS class names applied to the outer container.