{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "integrations",
  "name": "Integrations",
  "category": "Sections",
  "description": "A directory of integrations or partners: mark, name, category and one line on what it does, each tile one link.",
  "tags": [
    "integrations",
    "apps directory",
    "connectors",
    "partners",
    "marketplace",
    "plugins",
    "saas",
    "works with",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "catalogue",
    "intents": [
      "integrations directory",
      "works with",
      "app marketplace",
      "connectors",
      "partners grid"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [
      "bento",
      "feature-grid"
    ],
    "worksBefore": [
      "cta"
    ],
    "alternatives": [
      "logo-cloud"
    ],
    "avoid": "Listing integrations that do not exist yet as if they did."
  },
  "url": "https://mian.ro/components/integrations",
  "markdownUrl": "https://mian.ro/ai/components/integrations.md",
  "classes": [
    {
      "name": "mn-integrations",
      "description": "The grid (auto-fills columns)."
    },
    {
      "name": "mn-integration",
      "description": "A tile (<article>); its name is the link."
    },
    {
      "name": "mn-integration-mark",
      "description": "The logo or initials, in a square."
    },
    {
      "name": "mn-integration-cat",
      "description": "The category, small."
    }
  ],
  "accessibility": [
    "Each integration is an article whose name is the link; the mark is decorative (aria-hidden).",
    "Filter chips above the grid are toggle buttons; announce the result count."
  ],
  "examples": [
    {
      "title": "Integrations",
      "description": null,
      "html": "<div class=\"mn-integrations\">\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">BF</span><p class=\"mn-integration-cat\">Banking</p><h3><a href=\"#\">Bank feeds</a></h3><p>Daily transactions from 40 Romanian and EU banks.</p></article>\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">eF</span><p class=\"mn-integration-cat\">Tax</p><h3><a href=\"#\">e-Factura</a></h3><p>Send and receive invoices through ANAF.</p></article>\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">PR</span><p class=\"mn-integration-cat\">People</p><h3><a href=\"#\">Payroll</a></h3><p>Salaries and contributions booked each month.</p></article>\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">St</span><p class=\"mn-integration-cat\">Payments</p><h3><a href=\"#\">Stripe</a></h3><p>Card payouts matched to invoices.</p></article>\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">Sl</span><p class=\"mn-integration-cat\">Messaging</p><h3><a href=\"#\">Slack</a></h3><p>Approvals and alerts in the channel you choose.</p></article>\n  <article class=\"mn-integration\"><span class=\"mn-integration-mark\" aria-hidden=\"true\">WH</span><p class=\"mn-integration-cat\">Developers</p><h3><a href=\"#\">Webhooks</a></h3><p>Every event, signed, to your endpoint.</p></article>\n</div>"
    }
  ],
  "css": ".mn-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }\n.mn-integration { position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.1rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); transition: border-color var(--mn-duration) var(--mn-ease); }\n.mn-integration:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); }\n.mn-integration > * { margin: 0; }\n.mn-integration-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); font: 700 .875rem/1 var(--mn-font); }\n.mn-integration-cat { color: var(--mn-muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }\n.mn-integration h3 { font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); }\n.mn-integration h3 a { color: var(--mn-fg); text-decoration: none; }\n.mn-integration h3 a::after { content: \"\"; position: absolute; inset: 0; border-radius: inherit; }\n.mn-integration p:last-child { color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/integrations.json"
  }
}