OdysseyUI

Code Block

A styled code block frame component with language badge and optional copy functionality.

Loading...

Installation

Usage

<CodeFrame
  code={`console.log("Hello from JavaScript");`}
  language="javascript"
/>

API Reference

CodeFrame

PropTypeDefault
code
string
-
language?
string
JS
className?
string
-
children
React.ReactNode
-

Examples

With Different Languages

  <CodeFrame
  code={`console.log("Hello from JavaScript");`}
  language="javascript"
/>

<CodeFrame
  code={`print("Hello from Python")`}
  language="python"
/>

<CodeFrame
  code={`System.out.println("Hello from Java");`}
  language="java"
/>

With Custom Styling

<CodeFrame
  code={`console.log("Styled CodeFrame");`}
  language="javascript"
  className="rounded-xl border border-neutral-200 bg-neutral-50"
/>

Built by Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 3/4/2026