{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "skeleton",
  "name": "Skeleton",
  "category": "Data display",
  "description": "Loading placeholders shaped like the content that is coming.",
  "tags": [
    "skeleton",
    "loading",
    "placeholder",
    "shimmer"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "loading placeholder",
      "content loading",
      "shimmer"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "loader",
      "spinner"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/skeleton",
  "markdownUrl": "https://mian.ro/ai/components/skeleton.md",
  "classes": [
    {
      "name": "mn-skeleton",
      "description": "Block placeholder, size it with width/height."
    },
    {
      "name": "mn-skeleton-text · mn-skeleton-circle",
      "description": "Line of text · circle."
    }
  ],
  "accessibility": [
    "Hide skeletons from assistive tech (aria-hidden) and set aria-busy=\"true\" on the region that is loading. Shimmer stops under reduced motion."
  ],
  "examples": [
    {
      "title": "Card loading",
      "description": null,
      "html": "<div class=\"mn-card\" style=\"max-width:22rem\" aria-busy=\"true\" aria-label=\"Loading\">\n  <div class=\"mn-card-body\" aria-hidden=\"true\">\n    <div class=\"mn-row\" style=\"flex-wrap:nowrap\"><span class=\"mn-skeleton mn-skeleton-circle\" style=\"width:2.5rem;height:2.5rem;flex:none\"></span>\n    <div class=\"mn-stack mn-grow\" style=\"--mn-gap:.5rem\"><span class=\"mn-skeleton mn-skeleton-text\" style=\"width:60%\"></span><span class=\"mn-skeleton mn-skeleton-text\" style=\"width:40%\"></span></div></div>\n    <span class=\"mn-skeleton\" style=\"height:8rem;margin-top:1rem\"></span>\n  </div>\n</div>"
    }
  ],
  "css": ".mn-skeleton {\n  display: block; min-height: .9em; border-radius: var(--mn-radius-field);\n  background: linear-gradient(90deg, var(--mn-surface-2) 0%, color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 6%) 50%, var(--mn-surface-2) 100%);\n  background-size: 200% 100%;\n  animation: mn-shimmer 1.4s ease-in-out infinite;\n}\n.mn-skeleton-text { height: .8em; border-radius: 4px; }\n.mn-skeleton-circle { border-radius: 50%; }\n@keyframes mn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n@media (prefers-reduced-motion: reduce) { .mn-skeleton { animation: none; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/skeleton.json"
  }
}