{ "name": "PlanCard", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/PlanCard.tsx", "chapterTag": "22 Billing", "chapter": "22-billing.html", "sectionId": "plan-card", "elName": "Three tiers — Free, Pro, Enterprise", "demoUrl": "https://brand.magicblocks.ai/components/22-billing#plan-card", "hasLiveDemo": false, "description": "A plan-tier card. Renders a name + price/period + description + feature\nlist + CTA. Three intensities (`muted` / `accent` / `ink`) cover the\ncommon 3-tier pricing layout. An optional corner pill marks the\nrecommended or current plan.", "useClient": false, "interactivity": "display", "namedExports": [ { "name": "PlanCard", "isPrincipal": true, "isType": false }, { "name": "PlanCardProps", "isPrincipal": false, "isType": false }, { "name": "PlanCardIntent", "isPrincipal": false, "isType": false } ], "importStatement": "import { PlanCard } from \"@magicblocksai/ui\";", "props": [], "classesUsed": [ "btn", "btn-primary", "plan-card", "plan-card-cta", "plan-card-desc", "plan-card-feature-check", "plan-card-features", "plan-card-head", "plan-card-name", "plan-card-period", "plan-card-pill", "plan-card-price", "title" ], "examples": { "react": "Start free trial}\n intent=\"accent\"\n pill=\"Recommended\"\n/>", "html": "
\n
\n
\n
Free
\n
$0
\n
billed monthly
\n
\n

Everything you need to evaluate MagicBlocks on a small team.

\n
    \n
  • Up to 3 seats
    • \n
  • 1,000 records
    • \n
  • Community support
    • \n
  • Standard integrations
    • \n
\n
\n
\n
\n Recommended\n
\n
Pro
\n
$29
\n
per seat / month
\n
\n

Everything in Free, plus the power-user surface area most teams need.

\n
    \n
  • Unlimited seats
    • \n
  • Unlimited records
    • \n
  • Priority support
    • \n
  • Custom domains
    • \n
  • SSO & SCIM
    • \n
  • Audit log access
    • \n
\n
\n
\n
\n
\n
Enterprise
\n
Custom
\n
billed annually
\n
\n

For organisations that need procurement, compliance, and dedicated support.

\n
    \n
  • Everything in Pro
    • \n
  • Dedicated success manager
    • \n
  • SOC 2 + HIPAA
    • \n
  • 99.99% SLA
    • \n
  • Custom contracts
    • \n
\n
\n
\n
", "css": ".btn {\n display: inline-flex; align-items: center; justify-content: center;\n gap: var(--s-2);\n font: 600 14.5px/1 var(--f-display);\n letter-spacing: -0.005em;\n padding: 11px var(--s-5);\n border: 1px solid transparent;\n border-radius: var(--r-md);\n cursor: pointer;\n text-decoration: none;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease),\n transform var(--dur-2) var(--ease),\n box-shadow var(--dur-2) var(--ease),\n color var(--dur-2) var(--ease);\n user-select: none;\n white-space: nowrap;\n appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-primary {\n /* `color: var(--on-accent)` (added in v1.19.0) is the canonical\n \"text on --accent\" token. Falls back to `var(--paper)` for any\n consumer on an older @magicblocksai/css that pre-dates the\n `--on-accent` token. */\n background: var(--accent); color: var(--on-accent, var(--paper));\n box-shadow: var(--sh-pink);\n}\n\n.plan-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--s-4);\n padding: var(--s-5);\n border-radius: var(--r-md);\n border: 1px solid var(--hair);\n background: var(--bg-paper);\n min-height: 360px;\n}\n\n.plan-card-cta {\n margin-top: auto;\n display: flex;\n}\n\n.plan-card-desc {\n margin: 0;\n font: 400 14px/1.5 var(--f-body);\n color: var(--fg-soft);\n}\n\n.plan-card-feature-check {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-top: 2px;\n color: var(--success);\n}\n\n.plan-card-features {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n}\n\n.plan-card-head {\n display: flex;\n flex-direction: column;\n gap: var(--s-1);\n}\n\n.plan-card-name {\n font: 600 16px/1.25 var(--f-display);\n color: var(--fg);\n}\n\n.plan-card-period {\n font: 500 12px/1.3 var(--f-mono);\n color: var(--fg-soft);\n}\n\n.plan-card-pill {\n position: absolute;\n top: var(--s-3);\n right: var(--s-3);\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n border-radius: 999px;\n background: var(--accent);\n color: var(--paper);\n font: 600 10.5px/1 var(--f-mono);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.plan-card-price {\n font: 700 32px/1.05 var(--f-display);\n color: var(--fg);\n font-variant-numeric: tabular-nums;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }" } }