"Comparison" covers two unrelated components. One is a draggable divider between two images, used to show a difference. The other is a table of products or plans with ticks and crosses. They share a word and nothing else, and both are worth doing properly because both exist to make a decision easier.
20 public components on 21st have "comparison" in the name.
The image slider
Image Comparison Slider by Le Thanh is the classic: two images, one draggable handle. Image Comparison by ibelick and Image Comparison by bundui are alternatives, Image Comparison Slider (Horizontal) by Ravi Katiyar is the horizontal variant, and Feature with Image Comparison by tommyjepsen embeds one in a feature block.
It is the right control for exactly one job: showing a difference between two states of the same thing. Before and after, with and without, light and dark.
Three things it needs. The handle is a real input[type=range] underneath, or at minimum focusable with arrow-key control, because a drag-only divider excludes keyboards entirely. Both images want identical dimensions, or the comparison is between a difference and a crop. And each needs alt text describing what it shows, since "before" and "after" alone tell a screen reader nothing about what changed.
The comparison table
Pricing Section with Comparison by tommyjepsen is the plan-by-feature grid, which the pricing guide covers as a layout.
The rules that make one readable are all about restraint. Rows are features and columns are options, never the reverse, because a reader scans down a column to evaluate one option. Fewer than about eight rows, or nobody reaches the bottom. And a tick is not a claim: "Included" and "Not included" as text beside the mark, or at minimum an accessible name on the icon, because a table of unlabelled ticks and crosses is a picture rather than data.
On a phone the table has the same three options as any wide table, per the data table guide: scroll it in its own container with the first column sticky, stack it as one card per option, or show a chosen subset. Shrinking the text is the option that is not honest.
The competitor comparison
The version people usually mean when they search for this: your product against a named alternative.
Two rules keep it from backfiring. Be accurate, because the other side's users will read it and a wrong row is the only thing anyone remembers. And include something they do better, since a table where you win every row reads as marketing and is trusted accordingly.
The comparison guides on this site are built that way deliberately: they name what the other side is genuinely better at, because a comparison that cannot lose any row is not a comparison.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
An input[type=range] and a clip | The image slider, keyboard-accessible, in very little code | You style it |
A real <table> | The comparison grid, with semantics for free | You design the responsive behaviour |
| shadcn/ui | Table and Badge underneath | No comparison component |
| 21st | Image sliders, feature blocks and plan grids | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How do you make an image comparison slider accessible?
- Put a real range input underneath the handle, or at minimum make it focusable with arrow-key control, because a drag-only divider excludes keyboards entirely. Give both images identical dimensions and alt text describing what each shows, since before and after alone say nothing about what changed.
- How should a comparison table be structured?
- Rows are features and columns are options, because a reader scans down a column to evaluate one choice. Keep it under about eight rows, and label the ticks: Included and Not included as text or at least as an accessible name, since a grid of unlabelled marks is a picture rather than data.
- How do you write a competitor comparison people believe?
- Be accurate, because the other side's users will read it and one wrong row is what everyone remembers. And include something they genuinely do better: a table where you win every row reads as marketing and is trusted accordingly.
- How does a comparison table work on mobile?
- The same three honest options as any wide table: horizontal scroll in its own container with the first column sticky, one card per option, or a chosen subset with the rest behind a detail view. Shrinking the text until it fits is the option that is not honest.