{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "empty-state",
  "name": "Empty state",
  "category": "Data display",
  "description": "What to show when there is nothing to show, with a next step.",
  "tags": [
    "empty state",
    "no results",
    "zero state",
    "placeholder"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "no results",
      "nothing here yet",
      "first use",
      "empty inbox",
      "zero state"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/empty-state",
  "markdownUrl": "https://mian.ro/ai/components/empty-state.md",
  "classes": [
    {
      "name": "mn-empty",
      "description": "Container."
    },
    {
      "name": "mn-empty-icon · mn-empty-title · mn-empty-desc",
      "description": "Parts."
    }
  ],
  "accessibility": [
    "Make the title a heading at the right level so the state is discoverable in the outline."
  ],
  "examples": [
    {
      "title": "No projects",
      "description": null,
      "html": "<div class=\"mn-empty\" style=\"max-width:30rem\">\n  <div class=\"mn-empty-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg></div>\n  <h3 class=\"mn-empty-title\">No projects yet</h3>\n  <p class=\"mn-empty-desc\">Create your first project to start collecting feedback from your team.</p>\n  <button class=\"mn-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg> New project</button>\n</div>"
    }
  ],
  "css": ".mn-empty {\n  display: flex; flex-direction: column; align-items: center; gap: .5rem;\n  padding: 2.5rem 1.5rem; text-align: center;\n  border: var(--mn-border-w) dashed var(--mn-border); border-radius: var(--mn-radius-box);\n}\n.mn-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: 50%; background: var(--mn-surface-2); color: var(--mn-muted); }\n.mn-empty-icon svg { width: 1.4rem; height: 1.4rem; }\n.mn-empty-title { margin: 0; font: 600 1rem/1.3 var(--mn-font); }\n.mn-empty-desc { margin: 0 0 .6rem; max-width: 34ch; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.55; }\n}\n\n@layer mian.components {",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/empty-state.json"
  }
}