Dark Matrix Pricing Table

Pricing 8

About

A dark-themed plan comparison table with dashed row dividers, mint check/cross icons, and per-plan call-to-action pills, with a mobile plan picker for narrow screens.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dark Matrix Pricing Table to your project and fits it to your theme.

Code

How Dark Matrix Pricing Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import DarkMatrix from "@/components/ui/dark-matrix";
import type { FeatureGroup, Plan } from "@/components/ui/types";

const plans: Plan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "For individuals getting started",
    price: { monthly: 0, annual: 0 },
    cta: "Get started",
    features: [],
  },
  {
    id: "pro",
    name: "Pro",
    tagline: "For growing teams",
    price: { monthly: 29, annual: 24 },
    cta: "Upgrade",
    featured: true,
    features: [],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    tagline: "For large organizations",
    price: null,
    cta: "Contact sales",
    features: [],
  },
];

const groups: FeatureGroup[] = [
  {
    label: "Core",
    rows: [
      { label: "Projects", values: ["3", "20", "Unlimited"] },
      { label: "Team members", values: ["1", "10", "Unlimited"] },
      { label: "API access", values: [false, true, true] },
    ],
  },
  {
    label: "Support",
    rows: [
      { label: "Priority support", values: [false, true, true] },
      { label: "Dedicated manager", values: [false, false, true] },
      {
        label: "SLA",
        hint: "Service level agreement",
        values: [false, "99.9%", "99.99%"],
      },
    ],
  },
];

export default function DarkMatrixDemo() {
  return (
    <div className="w-full p-6">
      <DarkMatrix
        eyebrow="Pricing"
        heading="Compare plans"
        subheading="Pick the plan that fits your team's needs."
        plans={plans}
        groups={groups}
      />
    </div>
  );
}