Componentdata0.83 KB gzipZero dependencies

Compare Table

Plan comparison with highlight.

Preview

Live Preview

Feature	General	VIP
Price	$30	$120
Sections	Balcony	Orchestra + Box
Refund window	24 hours	7 days
Lounge	No	Yes

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add compare-table

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { CompareTable } from "@/components/ui/compare-table";

<CompareTable />

Usage guidance

Use Compare Table when a ticket stub surface needs Plan comparison with highlight. Keep props minimal and prefer composition with sibling stubs.

Avoid Compare Table for long form flows or dense data grids where a dedicated layout block fits better.

Source code

compare-table.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface CompareColumn {
  id: string;
  label: string;
  values: string[];
  highlight?: boolean;
}

export interface CompareTableProps extends React.HTMLAttributes<HTMLDivElement> {
  rows?: string[];
  columns?: CompareColumn[];
}

const FALLBACK_ROWS = ["Price", "Sections", "Refund window", "Lounge"];
const FALLBACK_COLS: CompareColumn[] = [
  { id: "ga", label: "General", values: ["$30", "Balcony", "24 hours", "No"] },
  { id: "vip", label: "VIP", values: ["$120", "Orchestra + Box", "7 days", "Yes"], highlight: true },
];

/** Side by side plan comparison with highlighted column. */
export function CompareTable({ rows = FALLBACK_ROWS, columns = FALLBACK_COLS, className, ...props }: CompareTableProps) {
  return (
    <div className={cn("w-full overflow-x-auto rounded-lg border-2 border-foreground bg-card shadow-md", className)} {...props}>
      <table className="w-full font-mono text-xs">
        <thead>
          <tr className="border-b-2 border-foreground">
            <th className="px-3 py-2 text-left text-[10px] uppercase text-muted-foreground">Feature</th>
            {columns.map((c) => (
              <th key={c.id} className={cn("px-3 py-2 text-center text-[11px] font-black uppercase", c.highlight ? "bg-accent text-accent-foreground" : "bg-secondary text-foreground")}>{c.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r} className="border-b border-dashed border-border last:border-0">
              <td className="px-3 py-2 font-bold uppercase text-muted-foreground">{r}</td>
              {columns.map((c) => (
                <td key={c.id} className={cn("px-3 py-2 text-center text-foreground", c.highlight && "bg-accent/10 font-bold")}>{c.values[i] ?? "-"}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}