Code Preview

A component that displays code snippets with syntax highlighting and a copy button.

1
2"use client";
3
4import React from "react";
5
6export default function Example() {
7  return <div>Hello, World!</div>;
8}
9

Installation

1. Dependencies

npm install react-syntax-highlighter clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Code Preview Code

Copy Code Preview Code

CodePreview Props

Name	Type	Required	Default	Description
code	string	Yes	undefined	The code snippet to display with syntax highlighting.
language	string	No	"tsx"	The programming language of the code snippet for syntax highlighting.
theme	"dark" \| "light"	No	"dark"	The theme for syntax highlighting, either dark or light.
className	string	No	undefined	Additional class names for custom styling of the container.
showLineNumbers	boolean	No	true	Determines whether line numbers should be displayed in the code block.
children	React.ReactNode	No	undefined	Additional elements to render inside the component, such as action buttons.