A Beautiful Code Block Component for React

Enhance your React applications with a feature-rich, customizable code display component. Simple, easy to use and understand API design with a "own your own" approach. NPM package will be avaialable soon, but for now you can copy the code from the repo or run the *highly experimental* installation script below.
Btw, the beautiful props table is is also made by me and open source with a decent API

👀
Created by @remcostoeten.

View on GitHub

Feature Showcase

This demo shows the search functionality in action. The search box is pre-filled with "return userData" and the matching line is highlighted.

24 lines • 77 words
No results
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('Error fetching user data:', error);
    return null;
  }
}

// Usage of the async function
(async () => {
  const userId = 123;
  const user = await fetchUserData(userId);
  if (user) {
    console.log('User data:', user);
  } else {
    console.log('Failed to fetch user data');
  }
})();
Search query: return userData
Matching lines:

Create Your Own

Experiment with the CodeBlock component by creating your own custom code snippet. Use the form below to input your code, select a language, add badges, and see the result in real-time.

1 lines • 6 words
1
// Your code will appear here

Installation

You can install the CodeBlock component using the following bash script:

37 lines • 101 words
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#!/bin/bash

echo "🚀 Installing beautiful-code-block component..."

# Clone repository sparsely (only what we need)
git clone --depth 1 --filter=blob:none --sparse https://github.com/remcostoeten/beautifull-code-block

# Enter directory
cd beautifull-code-block

# Set sparse-checkout to only get the code-block component
git sparse-checkout set src/components/code-block

# Copy to components folder (creates it if it doesn't exist)
mkdir -p ../components
cp -r src/components/code-block ../components/

# Clean up: remove cloned repo
cd ..
rm -rf beautifull-code-block

# Install all required dependencies
echo "📦 Installing dependencies..."

npm install \
  framer-motion \
  lucide-react \
  react-syntax-highlighter \
  @radix-ui/react-slot \
  class-variance-authority \
  clsx \
  tailwind-merge \
  @radix-ui/react-dropdown-menu \
  @radix-ui/react-toast

echo "✅ Installation complete!"

After running the script:

  • A new folder called code-block will be created in your components directory.
  • The CodeBlock component is now ready to use in your project.
  • Import it in your files like this: import CodeBlock from '@/components/code-block/code-block'

API Reference

The CodeBlock component accepts the following props to customize its appearance and behavior:

Core Props

Essential properties for the code block

Prop
Type
Default
Description
code
*
string
-
The source code to be displayed
language
string
plaintext
Programming language for syntax highlighting

Display Options

Visual customization properties

Prop
Type
Default
Description
showLineNumbers
v1.0.0
boolean
true
Show line numbers in the gutter
enableLineHighlight
boolean
false
Enable line highlighting functionality
showMetaInfo
boolean
true
Show file metadata in header (lines, words)
maxHeight
string
400px
Maximum height before scrolling
fileName
string
-
Name of the file to display in header

Styling

Visual and theme customization

Prop
Type
Default
Description
className
string
-
Additional CSS classes to apply
badgeVariant
"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "custom"
default
Style variant for badges
badgeColor
string
-
Custom color for badges when variant is "custom"
fileNameColor
string
-
Custom color for the file name label

Interactive Features

Event handlers and interactive functionality

Prop
Type
Default
Description
onCopy
(code: string) => void
-
Called when code is copied to clipboard
onLineClick
(lineNumber: number) => void
-
Called when a line is clicked
onSearch
Array
(query: string, results: number[]) => void
-
Called when search is performed

Search & Highlighting

Search and line highlighting features

Prop
Type
Default
Description
initialSearchQuery
string
""
Initial search term
initialSearchResults
Array
number[]
[]
Initial array of line numbers matching search
initialHighlightedLines
Array
number[]
[]
Line numbers to highlight on initial render

Badge Configuration

Configuration for code block badges

Prop
Type
Default
Description
badges
Array<{ text: string; variant: BadgeVariant }>
-
Array of badges to display

Layout Options

Control the layout and spacing of the component

Prop
Type
Default
Description
propSpacing
"none" | "tight" | "normal" | "relaxed"
normal
Controls the vertical spacing between props

Usage Examples

Basic Usage

BasicExample.tsx
11 lines • 21 words
1
2
3
4
5
6
7
8
9
10
11
import { CodeBlock } from '@/components/code-block/code-block'

export default function Example() {
  return (
    <CodeBlock
      code="console.log('Hello, World!');"
      language="javascript"
      showLineNumbers
    />
  )
}

Advanced Usage with All Features

AdvancedExample.tsx
TypeScriptReact29 lines • 69 words
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { CodeBlock } from '@/components/code-block/code-block'

export default function AdvancedExample() {
  const handleSearch = (query: string, results: number[]) => {
    console.log(`Found matches at lines: ${results.join(', ')}`)
  }

  const handleLineClick = (lineNumber: number) => {
    console.log(`Line ${lineNumber} clicked`)
  }

  return (
    <CodeBlock
      code={codeString}
      language="python"
      showLineNumbers
      enableLineHighlight
      fileName="example.py"
      badges={[
        { text: 'Python', variant: 'primary' },
        { text: 'Example', variant: 'secondary' }
      ]}
      onSearch={handleSearch}
      onLineClick={handleLineClick}
      initialHighlightedLines={[1, 2, 3]}
      maxHeight="500px"
    />
  )
}

Customization

The CodeBlock component can be customized using Tailwind CSS classes or by modifying the component's source code. Here are some common customization examples:

Theme Customization

You can customize the colors, typography, and spacing using Tailwind CSS classes:

6 lines • 8 words
1
2
3
4
5
6
<CodeBlock
  className="dark:bg-gray-900 rounded-xl shadow-lg"
  code={myCode}
  language="javascript"
  showLineNumbers
/>

Custom Badge Styles

Create your own badge variants by extending the component's styles:

12 lines • 30 words
1
2
3
4
5
6
7
8
9
10
11
12
// In your CSS or Tailwind config
.badge-custom {
  @apply bg-gradient-to-r from-pink-500 to-purple-500 text-white;
}

// In your component
<CodeBlock
  code={myCode}
  badges={[
    { text: 'Custom', variant: 'custom' }
  ]}
/>