{
  "element": "nve-skeleton",
  "entrypoint": "@nvidia-elements/core/skeleton/skeleton.examples.json",
  "items": [
    {
      "id": "skeleton",
      "name": "Default",
      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>\n",
      "summary": "Basic skeleton component for text content. Placeholder lines appear while content loads.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "skeleton-effect",
      "name": "Effect",
      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>\n",
      "summary": "Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "skeleton-shape",
      "name": "Shape",
      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px\"></nve-skeleton>\n</div>\n",
      "summary": "Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.",
      "description": "",
      "composition": false,
      "tags": [
        "theme"
      ]
    },
    {
      "id": "skeleton-slotted",
      "name": "Slotted",
      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"> </nve-skeleton>\n</div>\n",
      "summary": "Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}