Comparison Table

Data Display

Two-column table comparing before/after, old/new, or problem/solution pairs. Used to present clear contrasts.

Code Example

<div className="rounded-lg border overflow-hidden">
  <div className="grid grid-cols-2">
    <div className="p-4 bg-destructive/10 font-semibold text-sm">Old Approach</div>
    <div className="p-4 bg-primary/10 font-semibold text-sm">New Approach</div>
  </div>
  {rows.map((row) => (
    <div key={row.label} className="grid grid-cols-2 border-t">
      <div className="p-4 text-sm text-muted-foreground">{row.old}</div>
      <div className="p-4 text-sm">{row.new}</div>
    </div>
  ))}
</div>

Variants (2)

Side by Side

Two equal columns with contrasting styles

layout= "columns"

Table Rows

Row-based with label, old value, new value

layout= "rows"

Guidelines

Do

Use clear column headers with contrasting labels
Keep rows short and scannable
Use color coding (red/green or muted/accent) for columns
Limit to 5-8 rows for readability

Don't

Compare more than 2 things (use pricing table for 3+)
Write full paragraphs in cells
Mix comparison types in one table
Use without a section header explaining the comparison

Use Cases

Old vs new system comparison (RCCS flaws vs solutions)
Before/after transformation
Competitor comparison
Traditional vs regenerative approach

Details

Category: Data Display
Reference Component: ComparisonTable
Variants: 2
Guidelines: 4 dos, 4 donts

Back to all patterns