TetraKits UI Compact Pricing Table ← Library

Compact Pricing Table

Compact pricing comparison table with Feature, Growth, and Enterprise columns and checkmark rows. Minimal light table for enterprise landing pages, scrollable on mobile with overflow-x-auto wrapper.

pricing tablefeature comparisonenterprise pricinghtml table reactsaas comparison
Live preview

Dependencies

react
npm install react react-dom
export function CompactPricingTable() {
  const rows = [
    ["Custom domains", "✓", "✓"],
    ["Analytics", "—", "✓"],
    ["SLA", "—", "✓"],
  ];
  return (
    <div className="overflow-x-auto rounded-xl border border-zinc-200">
      <table className="w-full min-w-[320px] text-left text-sm">
        <thead className="bg-zinc-50 text-zinc-600">
          <tr><th className="p-3">Feature</th><th className="p-3">Growth</th><th className="p-3">Enterprise</th></tr>
        </thead>
        <tbody>
          {rows.map(([f, a, b]) => (
            <tr key={f} className="border-t border-zinc-100"><td className="p-3 font-medium">{f}</td><td className="p-3">{a}</td><td className="p-3">{b}</td></tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}