Code Block — Blocks — OpenCosmos UI

CollapsibleCodeBlock

A reusable code block component with syntax highlighting, smooth expand/collapse animations, and copy functionality. Perfect for documentation and code examples.

Key Features:

Smooth spring animation with cubic-bezier easing
Theme-aware syntax highlighting (light/dark mode)
Copy to clipboard functionality
Preview mode showing first 3 lines when collapsed
Gradient overlay for collapsed state
Supports both string and tokenized code input
Respects motion preferences
Fully accessible with ARIA attributes

Live Example - Automatic Syntax Highlighting

Just pass a plain code string - the parser automatically applies multi-color syntax highlighting!

TypeScript Component Example

import { useState } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  onClick?: () => void;

import { useState } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  onClick?: () => void;
}

export function Button({ variant, onClick }: ButtonProps) {
  const [isActive, setIsActive] = useState(false);
  return <button onClick={onClick}>Click</button>;
}

JSX/React Example

React Component with Hooks

function Counter() {
  const [count, setCount] = useState(0);
  const [isActive, setIsActive] = useState(true);

  return

function Counter() {
  const [count, setCount] = useState(0);
  const [isActive, setIsActive] = useState(true);

  return (
    <div className="counter">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Usage Example

import { CollapsibleCodeBlock, parseCode } from '@opencosmos/ui';

// [New]: Automatic syntax highlighting - just pass a string!
<CollapsibleCodeBlock
  id="my-code"
  title="React Component"
  code={`const greeting = "Hello World";
console.log(greeting);`}
  showCopy={true}
/>

// Advanced: Use parseCode utility directly
const tokens = parseCode('const example = 42;');
<CollapsibleCodeBlock
  id="parsed-code"
  code={tokens}
/>

// Manual tokenization (for custom control)
import type { SyntaxToken } from '@opencosmos/ui';

const customTokens: SyntaxToken[] = [
  { text: 'const', type: 'keyword' },
  { text: ' example ', type: 'plain' },
  { text: '=', type: 'operator' },
  { text: ' "Hello"', type: 'string' },
];

<CollapsibleCodeBlock
  id="manual-tokens"
  code={customTokens}
/>

Props Reference

id: string

Required. Unique identifier for the code block (used for animation control).

code: string | SyntaxToken[]

Required. The code to display - can be a plain string or array of syntax tokens for highlighting.

title?: string

Optional. Title/label displayed above the code block.

showCopy?: boolean

Optional. Show/hide the copy button. Default: true.

defaultCollapsed?: boolean

Optional. Initial collapsed state. Default: true.

language?: string

Optional. Language identifier (e.g., 'typescript', 'css', 'html').

SyntaxToken Types

Available token types for syntax highlighting:

commentkeywordfunctionstringnumberbooleanoperatorpropertyclassNametagattributevariablepunctuationplain

Animation Details

The CollapsibleCodeBlock uses a smooth spring animation that respects user motion preferences.

Animation Properties:

Duration: 500ms
Easing: cubic-bezier(0.34, 1.56, 0.64, 1) - Spring bounce
Property: max-height transition
Preview Height: 6.6rem (3 lines of code)
Gradient Overlay: 1.5rem (h-6) from bottom

Accessibility: The animation respects prefers-reduced-motion by skipping animations when users have this preference enabled.