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.
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>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.