Skip to content
UI Kit
Accent color

Comparison tables and before and after

You against the others, before and after, scored options, a feature matrix and pros and cons.

5 variants
Switch category

Make the difference visible

A comparison section helps visitors who are already weighing options. It puts your offer next to the alternative, which is often doing nothing or doing it by hand, and shows the difference in one view.

Us against the others lists criteria in rows with you and the alternatives in columns. Checklist matrix does the same for many features at once. Before and after contrasts two states, the old way and the new one. Option cards score three choices for a decision, and Pros and cons gives an honest view of one option, which builds trust.

Compare against the real alternative your customers consider. Keep the criteria factual and few, five to eight rows read well. Every check and cross carries text for screen readers, so the table stays clear without the icons.

Comparison

Us against the others

A table with your column lit up. On phones you choose whom to compare with instead of scrolling sideways.

Open in Studio

Before and after

The old way, muted, next to the new way, lit.

Open in Studio

Option cards

Three ways to the same goal, scored on the same bars. The recommended one stands out.

Open in Studio

Checklist matrix

Features in groups against four tools, with a legend. Short names on phones.

Open in Studio

Pros and cons

One decision, weighed honestly, with a score and a verdict.

Open in Studio

Details

What Comparison brings along, read from the registry and the source.

Area
Content
Variants
5
Version
1.0.1 · since 1.0.0
File
components/ui/comparison.tsx
Brings along
utilskitbuttonbadgeiconsectionreveal
npm packages
None
Languages
English and German, 10 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The ComparisonProps interface from components/ui/comparison.tsx, with the comments from the code.

  • variantoptional
    ComparisonVariant

    tablebefore-aftercardschecklist-matrixpros-cons

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • columnsoptional
    ComparisonColumn[]
  • rowsoptional
    ComparisonRow[]
  • beforeoptional
    ComparisonList
  • afteroptional
    ComparisonList
  • optionsoptional
    ComparisonOption[]
  • prosoptional
    ComparisonList
  • consoptional
    ComparisonList
  • verdictoptional
    { score?: number; text: string }

    For pros-cons: score from 0 to 10 and a sentence

  • actionoptional
    { label: string; href: string }

Built-in texts

Comparison writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 10 texts
featureEnglish FeatureGerman Funktion
compareWithEnglish Compare withGerman Vergleichen mit
yesEnglish IncludedGerman Enthalten
noEnglish Not includedGerman Nicht enthalten
partialEnglish PartlyGerman Teilweise
recommendedEnglish RecommendedGerman Empfohlen
prosEnglish ProsGerman Dafür
consEnglish ConsGerman Dagegen
verdictEnglish Our verdictGerman Unser Urteil
outOfEnglish out of 10German von 10

Accessibility

Read from the source of the component.

  • Sets aria-label, so screen readers announce purpose and state.
  • Uses the roles cell, columnheader, img, row, rowgroup, rowheader and table.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 7 places in the code switch motion off then.

Frequent questions

How do I install Comparison?

With aiw add @ai-website/comparison. The command puts components/ui/comparison.tsx into your project, the code is yours from then on. It brings along button, badge, icon, section and reveal. It needs no further npm packages.

Which variants does Comparison have?

5 variants, Us against the others, Before and after, Option cards, Checklist matrix and Pros and cons. You pick one with the variant prop, for example variant="before-after".

Can I translate the texts of Comparison?

Yes. Comparison carries 10 texts of its own in English and German, such as “Feature”, “Compare with” and “Included”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Comparison?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Comparison with aiw_components and install it with aiw_add @ai-website/comparison. Name the variant in your prompt, for example variant="table", and the assistant writes your content straight into the props.

Can I adjust Comparison without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Comparison code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Comparison on a page.

Often searched

Jump to

Copied to the clipboard