Compare

Compare options or show before/after examples.

Columns

Side by side comparison:

mdx

<Compare>
  <Column title="free" variant="default">
    basic features included
  </Column>
  <Column title="pro" variant="good">
    all features unlocked
  </Column>
</Compare>

free

basic features included

pro

all features unlocked

Good vs bad

Highlight recommended vs not recommended:

mdx

<Compare>
  <Column title="avoid" variant="bad">
    overly complex solutions
  </Column>
  <Column title="prefer" variant="good">
    simple and direct code
  </Column>
</Compare>

avoid

overly complex solutions

prefer

simple and direct code

Before/after

Show transformations:

mdx

<CompareRow left="verbose configuration" right="minimal setup" />

before

verbose configuration

after

minimal setup

Props

Column

prop	type	default	description
title	string	-	Column header
variant	"default" \| "good" \| "bad"	"default"	Style variant
children	ReactNode	-	Content