proNew190 lines · framer-motion

Pricing Comparison Table

Every plan, every feature, one honest table. A sticky-header feature comparison table across plans, grouped into collapsible sections (Core, Collaboration, Support), with a highlighted plan column.

Use it for: A dedicated pricing page, or the bottom of a shorter pricing section, when customers are comparing plans feature-by-feature rather than just by price.
Themes: Light + dark
License: Commercial use

Live

Compare plans

Every feature, side by side

Feature	Starter $19/mo	Growth $49/mo	Scale $129/mo

Workspaces	1	5	Unlimited
Team members	3	20	Unlimited
API requests / mo	10k	150k	2M

Shared dashboards	✓	✓	✓
Comments & mentions	–	✓	✓
Approval workflows	–	✓	✓
SSO / SAML	–	–	✓

Community support	✓	✓	✓
Priority email	–	✓	✓
Dedicated Slack channel	–	–	✓
Uptime SLA	–	99.9%	99.99%

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export type FeatureValue = boolean | string;

export interface FeatureGroup {
  name: string;
  rows: { label: string; values: FeatureValue[] }[];
}

export interface PricingComparisonTableProps {
  eyebrow?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each feature group is a collapsible section with its own disclosure button; groups start open or collapsed via startCollapsed.
→The table header stays stuck to the top of its scroll container while comparing rows.
→highlightedPlan tints the matching plan's header and column to draw the eye without changing the data.
→Boolean feature values render as a check or dash; string values (counts, limits) render as plain text.
→The table scrolls horizontally on narrow screens instead of squeezing columns unreadably thin.

Accessibility

✓The table uses real <table>/<th scope> markup, so screen readers announce row and column headers correctly.
✓Disclosure buttons expose `aria-expanded` and `aria-controls`, and rows fade in/out instead of jumping.
✓Included/excluded icons carry text alternatives via `aria-label`, not colour alone.
✓Honours prefers-reduced-motion.