Manicat UI

Comparison table

An us versus them table with a sticky header, a highlighted column, and a stacked phone view.

Preview
Comparison table preview

How Relay compares

Everything a growing team needs, without the enterprise price or the spreadsheet sprawl.

Feature
Relay$10 per seat
Legacy suite$24 per seat
SpreadsheetsFree
Point tools$16 per seat
Planning
Projects
Unlimited
Up to 50
Unlimited
Up to 10
Timelines and roadmaps
Included
Included
Not included
PartialTimeline only
DependenciesBlocked work moves when its blocker does
Included
Included
Not included
Not included
Templates
Included
Included
PartialManual copies
Included
Collaboration
Real time editing
Included
Not included
Included
Included
Free guest access
Included
Not included
Included
PartialFive guests
Comments and mentions
Included
Included
Included
Included
Offline modeEdits sync when you reconnect
Included
Not included
PartialDesktop app only
Not included
Automation
Rules and triggers
Included
Included
Not included
PartialPaid add on
AI summaries
Included
Not included
Not included
Not included
Public API
Included
Included
Included
Included
Security
SAML single sign on
Included
Included
PartialEnterprise plan
Not included
Audit log
Included
Included
Not included
Not included
EU data residency
Included
PartialEnterprise plan
Included
Not included
IncludedPartialNot included

Showing all rows

When to use

  • Showing how your product stacks up against named alternatives.
  • Feature matrices with three to five columns and grouped rows.

When not to use

  • Use plan-comparison to compare your own pricing tiers.
  • Use a sortable data table for large datasets.

shadcn CLI

Also installs (1)

  • manicat-foundation
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-table",
  "type": "registry:block",
  "title": "Comparison table",
  "description": "An us versus them table with a sticky header, a highlighted column, and a stacked phone view.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/blocks/comparison-table/comparison-table.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/comparison-table/comparison-table.tsx"
    },
    {
      "path": "registry/blocks/comparison-table/comparison-table-data.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/comparison-table/comparison-table-data.ts"
    },
    {
      "path": "registry/blocks/comparison-table/comparison-table.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/comparison-table/comparison-table.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/comparison-table",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/comparison-table",
    "markdown": "https://uiarc.dev/components/blocks/comparison-table/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { ComparisonTable } from "manicat/registry/blocks/comparison-table/comparison-table";

export function ComparisonTableExample() {
  return <ComparisonTable />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Us vs them Your product against one competitor, with a switch to hide the rows that don't differ.

Us vs them Your product against one competitor, with a switch to hide the rows that don't differ. preview

How we compare

Everything a growing team needs, without the enterprise price or the spreadsheet sprawl.

Feature
Acme$10 per seat
Legacy suite$24 per seat
Planning
Projects
Unlimited
Up to 50
Timelines
Included
Included
DependenciesBlocked work moves with its blocker
Included
Not included
IncludedPartialNot included
Start free

Showing all rows

Keyboard interactions

KeysAction
TabMoves to the differences switch, the phone competitor picker, and the call to action.
SpaceFlips the differences switch.

Accessibility

  • Built with table, row, columnheader, rowheader and cell roles, so screen readers navigate it as a table.
  • Marks have text alternatives: Included, Partial (with its note), Not included.
  • The switch is a real checkbox with role switch; a polite live region says when rows are filtered.
  • Meaning never relies on color: checks, half circles and dashes differ in shape, with a legend.

Motion

  • Checks in your column draw in once, staggered down the table, when they scroll into view.
  • Differences only collapses matching rows on the smooth spring and closes the gap.
  • Picking a competitor on phones swaps its header and marks with a small pop.
  • The call to action morphs its label to the done state.
  • Reduced motion shows every mark at once and swaps collapses for instant changes.

Responsive behavior

  • Below 640px (stackBelow) it shows your column beside one competitor with a picker above.
  • Column widths are fractions, so it never scrolls sideways.

Performance

  • A width observer switches layouts; no per frame work while scrolling.
  • Row collapses animate height only on rows that change.

Notes for AI

  • Use this for a /compare or /alternatives page or under pricing.
  • Keep competitor names generic or factual; values should be verifiable.
  • Set stickyTop to your fixed header height; use maxHeight only when embedding the table in a panel.