Code

Displays syntax-highlighted code with a built-in copy button.

export function Button({ children, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 rounded bg-blue-500 text-white"
    >
      {children}
    </button>
  );
}
import { Code } from 'ui-lab-components';
 
export function Example() {
  return (
    <Code language="tsx">
      {code}
    </Code>
  );
}

With Filename

Shows a header bar with the filename and language

Button.tsxtsx
export function Button({ children, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 rounded bg-blue-500 text-white"
    >
      {children}
    </button>
  );
}
import { Code } from 'ui-lab-components';
 
export function Example() {
  return (
    <Code
      language="tsx"
      filename="Button.tsx"
      theme={{ light: 'github-light', dark: 'github-dark' }}
    >
      {code}
    </Code>
  );
}
UI Lab