{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "divider",
  "name": "Divider",
  "category": "Data display",
  "description": "A horizontal or vertical rule, optionally with a label.",
  "tags": [
    "divider",
    "separator",
    "hr",
    "rule"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "separator",
      "horizontal rule",
      "or divider"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/divider",
  "markdownUrl": "https://mian.ro/ai/components/divider.md",
  "classes": [
    {
      "name": "mn-divider",
      "description": "Horizontal. Put text inside for a labelled divider."
    },
    {
      "name": "mn-divider-vertical",
      "description": "Vertical, inside a flex row."
    }
  ],
  "accessibility": [
    "An empty <hr> is announced as a separator. A labelled divider is presentational; use role=\"separator\" if it divides groups."
  ],
  "examples": [
    {
      "title": "Labelled and vertical",
      "description": null,
      "html": "<div style=\"max-width:24rem\">\n  <button class=\"mn-btn mn-btn-outline mn-btn-block\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 19c-4 1.5-4-2-6-2.5m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1-.3-3.4 1.3a11.6 11.6 0 0 0-6 0C6.8 2.3 5.8 2.6 5.8 2.6a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4.4 9c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21\"/></svg> Continue with GitHub</button>\n  <div class=\"mn-divider\" role=\"separator\">or continue with</div>\n  <button class=\"mn-btn mn-btn-block\">Email</button>\n</div>\n<div class=\"mn-row\" style=\"height:1.5rem\">Blog<span class=\"mn-divider mn-divider-vertical\"></span>Docs<span class=\"mn-divider mn-divider-vertical\"></span>Source</div>"
    }
  ],
  "css": ".mn-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; border: 0; color: var(--mn-muted); font-size: .75rem; font-weight: 500; }\n.mn-divider::before, .mn-divider::after { content: \"\"; flex: 1; height: var(--mn-border-w); background: var(--mn-border); }\n.mn-divider:empty { gap: 0; }\n.mn-divider:empty::after { display: none; }\n.mn-divider-vertical { flex-direction: column; margin: 0 .5rem; align-self: stretch; }\n.mn-divider-vertical::before, .mn-divider-vertical::after { width: var(--mn-border-w); height: auto; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/divider.json"
  }
}