Skip to main content
Compare two code snippets side-by-side with beautiful syntax highlighting and diff indicators.

Installation

npx shadcn@latest add @magicui/code-comparison

Usage

import { CodeComparison } from "@/components/ui/code-comparison"

const before = `function hello() {
  console.log("old code")
}`

const after = `function hello() {
  console.log("new code")
}`

export default function Example() {
  return (
    <CodeComparison
      beforeCode={before}
      afterCode={after}
      language="typescript"
      filename="example.ts"
      lightTheme="github-light"
      darkTheme="github-dark"
    />
  )
}

Props

beforeCode
string
required
Code snippet to display in the “before” section
afterCode
string
required
Code snippet to display in the “after” section
language
string
required
Programming language for syntax highlighting (e.g., “typescript”, “javascript”)
filename
string
required
Filename to display in the header
lightTheme
string
default:"'github-light'"
Shiki theme to use for light mode
darkTheme
string
default:"'github-dark'"
Shiki theme to use for dark mode
highlightColor
string
default:"'rgba(101, 117, 133, 0.16)'"
Color for highlighting code lines
className
string
Additional CSS classes to apply

Features

  • Side-by-side code comparison
  • Syntax highlighting via Shiki
  • Diff notation support (add/remove lines)
  • Focus mode for specific lines
  • Theme-aware (light/dark mode)
  • Responsive layout
  • Line-by-line highlighting
  • VS separator indicator

Notation Support

The component supports Shiki transformers for:
  • Diff notation (// [!code ++], // [!code --])
  • Focus notation (// [!code focus])
  • Highlight notation (// [!code highlight])

Credits

Created by dillionverma

Build docs developers (and LLMs) love