Kinetic UI | The Creative Motion Component Library

comparison-table

Compare Features

Basic

For individuals.

Pro

$29

For professionals.

Enterprise

$99

For large teams.

Core Features

Projects

Up to 3

Unlimited

Collaborators

Number of users who can edit projects.

Up to 5

Unlimited

Analytics

Support & Security

Support

Community

Email (24h)

Dedicated (1h)

SSO

Single Sign-On integration.

Audit Logs

Overview

A pricing page is often the most important page on a SaaS website. The ComparisonTable component solves the most common UX problems with large feature matrices:

Sticky Headers: As users scroll down through dozens of features, the plan names and prices stick to the top of the container, so they never lose context of which column they are evaluating.
Pro Highlighting: Built-in support for highlighting the "Most Popular" plan column to drive conversions.
Tooltips: Integrated hover tooltips for complex feature names without cluttering the layout.
Responsiveness: Safely handles horizontal overflow on mobile devices so tables don't break your layout grid.

Usage

import { ComparisonTable } from "@/components/creative/comparison-table"

export default function Pricing() {
  const plans = [
    { id: 'free', name: 'Free', price: '$0' },
    { id: 'pro', name: 'Pro', price: '$29', isPopular: true },
  ]

  const features = [
    {
      category: 'Features',
      items: [
        { name: 'API Access', values: { free: false, pro: true } },
        { name: 'Bandwidth', values: { free: '10GB', pro: '100GB' } },
      ]
    }
  ]

  return (
    <section className="py-20 max-w-5xl mx-auto">
      <ComparisonTable plans={plans} features={features} />
    </section>
  )
}

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ComparisonTable } from "@/components/creative/comparison-table";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ComparisonTable } from "@/components/creative/comparison-table";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ComparisonTable
        plans{/* value */}
        features{/* value */}
      />
    </div>
  );
}