Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Code Comparison

Code Comparison

PreviousNext

A component which compares two code snippets.

Loading...

Installation

Usage

import { CodeComparison } from "@/components/magicui/code-comparison";
<CodeComparison beforeCode={beforeCode} afterCode={afterCode} />

Props

PropTypeDefaultDescription
classNamestring-The class name to be applied to the component
beforeCodestring-The code snippet to display in the "before" section
afterCodestring-The code snippet to display in the "after" section
languagestring-The language of the code snippets (e.g., "typescript")
filenamestring-The filename to display for the code snippets
lightThemestringgithub-lightThe theme to use for light mode
darkThemestringgithub-darkThe theme to use for dark mode
highlightColorstringrgba(101, 117, 133, 0.16)The color to use for highlighting the code snippets