CodeBlock

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

Import

tsx

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

Playground

Interactively configure the CodeBlock props below.

tsx

import { Button } from '@tac-ui/native'; 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/native'; 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/native';

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;

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/native # Or with pnpm pnpm add @tac-ui/native # Start the dev server npm run dev

tsx

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

Glass Variant

The glass prop applies a semi-transparent background — ideal for overlaying code on visual backgrounds.

tsx

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

tsx

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

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 a semi-transparent background.