Code Block — React Component

A syntax-highlighted code block with header, line numbers, copy button, and fade gradient. Supports dark/light themes and multiple languages.

Feature Sectionshovercodesyntaxhighlightcopysnippetdarklight

Code Block — Variant 1

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Code Block — Variant 2

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Code Block — Variant 3

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Animation effects

hover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Code Block

The Code Block is a syntax-highlighted code display component with a configurable header, line numbers, copy button with feedback animation, and a trailing fade gradient. It supports dark and light themes and multiple programming languages via Prism or Shiki tokenization. A copy confirmation checkmark animates in on click and resets after a configurable duration. Use it in documentation pages, installation guides, and component detail pages to display code samples.

Common use cases

  • Code documentation and API reference pages
  • Installation and setup guide steps
  • Component usage example displays
  • Tutorial and course content pages