UI Lab | Code

Code

Syntax-highlighted code display with horizontal scroll, line expand, and 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>
  );
}

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>
  );
}