{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "funnel",
  "name": "Funnel",
  "category": "Data display",
  "description": "Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps.",
  "tags": [
    "funnel",
    "conversion",
    "pipeline",
    "sales",
    "marketing",
    "analytics",
    "chart",
    "drop-off"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "conversion funnel",
      "sales funnel",
      "drop-off",
      "signup funnel"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/funnel",
  "markdownUrl": "https://mian.ro/ai/components/funnel.md",
  "classes": [
    {
      "name": "mn-funnel",
      "description": "The stages (<ol>)."
    },
    {
      "name": "mn-funnel-bar",
      "description": "A bar; --_v sets its width. A colour role changes its colour."
    },
    {
      "name": "mn-funnel-rate",
      "description": "Conversion from the previous stage."
    }
  ],
  "accessibility": [
    "Each stage is text, label, number and rate, so the funnel reads correctly without the bars.",
    "Explain what the rate is relative to (the previous step, or the first)."
  ],
  "examples": [
    {
      "title": "Trial funnel, September",
      "description": null,
      "html": "<ol class=\"mn-funnel\" style=\"max-width:40rem\">\n  <li><span>Visited pricing</span><span class=\"mn-funnel-bar\" style=\"--_v:100%\">18,420</span><span class=\"mn-funnel-rate\">—</span></li>\n  <li><span>Started trial</span><span class=\"mn-funnel-bar\" style=\"--_v:62%\">2,210</span><span class=\"mn-funnel-rate\">12.0%</span></li>\n  <li><span>Connected a bank</span><span class=\"mn-funnel-bar\" style=\"--_v:40%\">1,412</span><span class=\"mn-funnel-rate\">63.9%</span></li>\n  <li><span>Paid</span><span class=\"mn-funnel-bar mn-success\" style=\"--_v:22%\">388</span><span class=\"mn-funnel-rate\">27.5%</span></li>\n</ol>"
    }
  ],
  "css": ".mn-funnel { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }\n.mn-funnel > li { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 4.5rem; gap: .75rem; align-items: center; font-size: var(--mn-text-sm); }\n.mn-funnel-bar { display: flex; align-items: center; justify-content: center; width: var(--_v); min-width: 3.5rem; height: 2.25rem; margin-inline: auto; border-radius: min(6px, var(--mn-radius-field)); background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg)); font-weight: 650; font-variant-numeric: tabular-nums; }\n.mn-funnel > li:nth-child(2) .mn-funnel-bar { opacity: .88; } .mn-funnel > li:nth-child(3) .mn-funnel-bar { opacity: .78; } .mn-funnel > li:nth-child(n+4) .mn-funnel-bar { opacity: .7; }\n.mn-funnel-rate { color: var(--mn-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: end; }\n@media (max-width: 30rem) { .mn-funnel > li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .mn-funnel-bar { grid-column: 1 / -1; grid-row: 2; margin-inline: 0; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/funnel.json"
  }
}