Components

Comparison

Two-column Before/After or A vs B layout

Use Comparison to show two options side by side with optional labels (e.g. Before/After, Option A vs B).

Before and After

Before

Old configuration used a single JSON file with no i18n support.

New config supports i18n.translations and i18n.dir for RTL.

After

<Comparison leftLabel="Before" rightLabel="After">
  <div>Old approach...</div>
  <div>New approach...</div>
</Comparison>

Option A

Content for the first option.

Content for the second option.

Option B

leftLabelstringdefault: 'Before'

Label for the left column

rightLabelstringdefault: 'After'

Label for the right column

classNamestring

Additional CSS classes

Comparison expects exactly two children: the first is the left column content, the second is the right column content.