Pricing Comparison

A plan comparison table for SaaS pricing pages with mixed value types, optional highlights, and column badges.

Preview

Features

Handles booleans, numbers, and text in a single table
Popular-column highlight and optional badges
Legend for included vs. not included values
Mobile-safe horizontal scrolling
Optional caption and footnote for fine print

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
pricing-comparison.tsx	components/billing/pricing-table/pricing-comparison.tsx
types.ts	components/billing/pricing-table/types.ts
index.ts	components/billing/pricing-table/index.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add badge table

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. pricing-comparison.tsx

pricing-comparison.tsx

tsx

"use client";

import { Check, Minus } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";

2. types.ts

types.ts

tsx

export type BillingInterval = "monthly" | "yearly";

export interface PricingFeature {
  id: string;
  name: string;

3. index.ts

index.ts

tsx

export { PricingTable } from "./pricing-table";
export { PricingCard } from "./pricing-card";
export { PricingToggle } from "./pricing-toggle";
export { PricingFeature } from "./pricing-feature";
export { PricingComparisonTable } from "./pricing-comparison";
export type * from "./types";

Usage

app/pricing/page.tsx

tsx

import {
  PricingComparisonTable,
  type PricingComparisonRow,
  type PricingComparisonTier,
} from "@/components/billing/pricing-table";

Props

Prop	Type	Default
tiers	PricingComparisonTier[]	Required
rows	PricingComparisonRow[]	Required
title	string	"Compare plans"
description	string	-
caption	string	-
footnote	string	-
showLegend	boolean	true
className	string	-