{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "pricing",
  "name": "Pricing",
  "category": "Sections",
  "description": "Plan tiers with a featured plan, feature lists and a monthly/yearly switch in pure CSS.",
  "tags": [
    "pricing",
    "plans",
    "tiers",
    "pricing table",
    "subscription",
    "billing",
    "monthly yearly",
    "saas"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "decision",
    "intents": [
      "saas pricing",
      "pricing plans",
      "subscription tiers",
      "monthly yearly toggle",
      "compare plans",
      "tickets"
    ],
    "prominence": "high",
    "density": "medium",
    "worksAfter": [
      "testimonial",
      "feature-grid"
    ],
    "worksBefore": [
      "faq",
      "cta",
      "comparison"
    ],
    "alternatives": [
      "price-list",
      "comparison",
      "radio-card"
    ],
    "avoid": "More than four tiers, or hiding every price behind “Contact us”."
  },
  "url": "https://mian.ro/components/pricing",
  "markdownUrl": "https://mian.ro/ai/components/pricing.md",
  "classes": [
    {
      "name": "mn-plans",
      "description": "Wrapper for the billing switch and the tiers; the switch shows [data-period=\"monthly\"] or [data-period=\"yearly\"] prices inside it."
    },
    {
      "name": "mn-billing",
      "description": "A mn-toggle-group of two radio labels with value=\"monthly\" and value=\"yearly\"."
    },
    {
      "name": "mn-pricing",
      "description": "The tiers: stacked, then one equal column per tier."
    },
    {
      "name": "mn-tier",
      "description": "One plan. Add mn-card for the surface. mn-tier-featured outlines the recommended one; mn-tier-badge labels it."
    },
    {
      "name": "mn-tier-name · mn-tier-desc · mn-tier-action",
      "description": "Plan name, who it is for, and a full-width button."
    },
    {
      "name": "mn-price",
      "description": "mn-price-amount and mn-price-period."
    }
  ],
  "accessibility": [
    "The billing switch is a real radio group inside a <fieldset> with a <legend> (visually hidden if you like).",
    "Hidden prices use display:none, so screen readers read only the current period.",
    "Say what “featured” means in text (the badge), not only with the outline."
  ],
  "examples": [
    {
      "title": "Pricing",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\"><div class=\"mn-container mn-plans\">\n  <fieldset class=\"mn-toggle-group mn-billing\" style=\"border:0;margin:0\"><legend class=\"mn-sr-only\">Billing period</legend>\n    <label><input type=\"radio\" name=\"billing-ex\" value=\"monthly\" checked>Monthly</label>\n    <label><input type=\"radio\" name=\"billing-ex\" value=\"yearly\">Yearly · 2 months free</label>\n  </fieldset>\n  <div class=\"mn-pricing\">\n    <article class=\"mn-card mn-tier\"><h3 class=\"mn-tier-name\">Starter</h3><p class=\"mn-tier-desc\">One entity, up to 5 accounts.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\"><span data-period=\"monthly\">€49</span><span data-period=\"yearly\">€41</span></span><span class=\"mn-price-period\">per month</span></p>\n      <a class=\"mn-btn mn-btn-outline mn-tier-action\" href=\"#\">Start free</a>\n      <ul class=\"mn-checklist\"><li>Nightly reconciliation</li><li>2 users</li><li class=\"mn-off\"><span class=\"mn-sr-only\">Not included: </span>Multi-entity</li></ul></article>\n    <article class=\"mn-card mn-tier mn-tier-featured\"><span class=\"mn-badge mn-tier-badge\">Most teams</span><h3 class=\"mn-tier-name\">Team</h3><p class=\"mn-tier-desc\">Up to 5 entities and 50 accounts.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\"><span data-period=\"monthly\">€190</span><span data-period=\"yearly\">€158</span></span><span class=\"mn-price-period\">per month</span></p>\n      <a class=\"mn-btn mn-tier-action\" href=\"#\">Start free</a>\n      <ul class=\"mn-checklist\"><li>Everything in Starter</li><li>Multi-entity and currency</li><li>10 users</li></ul></article>\n    <article class=\"mn-card mn-tier\"><h3 class=\"mn-tier-name\">Scale</h3><p class=\"mn-tier-desc\">Unlimited entities, SSO and an auditor seat.</p>\n      <p class=\"mn-price\"><span class=\"mn-price-amount\">Custom</span></p>\n      <a class=\"mn-btn mn-btn-outline mn-tier-action\" href=\"#\">Talk to us</a>\n      <ul class=\"mn-checklist\"><li>Everything in Team</li><li>SAML SSO and audit log export</li><li>Named support</li></ul></article>\n  </div>\n</div></section>"
    }
  ],
  "css": ".mn-plans { display: grid; gap: 2rem; }\n.mn-billing { justify-self: start; min-inline-size: 0; max-width: 100%; flex-wrap: wrap; }\n.mn-plans > * { min-width: 0; }\n.mn-billing input { position: absolute; opacity: 0; pointer-events: none; }\n.mn-billing label:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-pricing { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }\n@container mn (min-width: 48rem) { .mn-pricing { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }\n.mn-tier { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3cqi, 2rem); overflow: visible; }\n.mn-tier > * { margin: 0; }\n.mn-tier-name { font: 600 1rem/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-tier-desc { color: var(--mn-muted); font-size: .9375rem; line-height: 1.55; }\n.mn-tier .mn-checklist { font-size: .9375rem; }\n.mn-tier-action { width: 100%; }\n.mn-tier-featured { outline: 2px solid var(--mn-primary); outline-offset: -1px; }\n.mn-tier-badge { position: absolute; top: 1.25rem; right: 1.25rem; }\n.mn-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }\n.mn-price-amount { font: var(--mn-heading-weight) clamp(2.25rem, 1.8rem + 1.5cqi, 3rem)/1 var(--mn-font-heading); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-price-period { color: var(--mn-muted); font-size: .875rem; }\n.mn-plans [data-period=\"yearly\"], .mn-plans:has(input[value=\"yearly\"]:checked) [data-period=\"monthly\"] { display: none; }\n.mn-plans:has(input[value=\"yearly\"]:checked) [data-period=\"yearly\"] { display: inline; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/pricing.json"
  }
}