Code Block

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

React

delay

duration

typeEffect

theme

language

Installation

Usage

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

API Reference

CodeFrame

Prop	Type	Default
`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"
/>

Code Block

Installation

Usage

API Reference

CodeFrame

Examples

With Different Languages

With Custom Styling

On this page