{
  "title": "Skeleton",
  "description": "Subtly pulsing placeholder that signals \"content loading here, in this shape.\"",
  "url": "/docs/components/skeleton",
  "since": "0.2.0",
  "tags": [
    "feedback"
  ],
  "platform": "both",
  "source": "---\ntitle: Skeleton\ndescription: Subtly pulsing placeholder that signals \"content loading here, in this shape.\"\nsince: 0.2.0\ntags: [feedback]\nplatform: both\ncategory: feedback\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Skeleton\" />\n\n## At a glance\n\n- Pulses opacity between 100% and 55% over ~900ms — calm enough to use throughout a list without flashing.\n- Decorative — `aria-hidden` is set automatically. Pair with a real `aria-busy` indicator on the loading region.\n\n## Preview\n\n<Preview name=\"skeleton-basic\" />\n\n## `width` and `height`\n\n`width` accepts a number (px) or any RN dimension string like `'40%'`\nor `'auto'`. `height` is px-only because RN doesn't accept percentage\nheights without a parent height.\n\n```tsx\n<Skeleton width={120} height={16} />     // 120 × 16 px\n<Skeleton width=\"40%\" height={16} />     // 40% of parent width, 16 px tall\n```\n\n## `radius`\n\nBorder radius in px, or `'full'` for circular skeletons (avatars,\nicon buttons). Default `6`.\n\n```tsx\n<Skeleton width={40} height={40} radius=\"full\" />     // avatar placeholder\n<Skeleton width={120} height={32} radius={8} />       // button placeholder\n```\n\n## `static`\n\nSet `static` to opt out of the pulse animation. Use it when you stack\nmany skeletons in a long list — a hundred independent animations can\nfeel busier than helpful, and a static placeholder is still recognized\nas \"loading state\" by users.\n\n```tsx\n{rows.map((_, i) => <Skeleton key={i} static height={20} />)}\n```\n\n## `style`\n\nForwarded to the underlying RN `<View>` so you can layer in margins,\nabsolute positioning, or any other layout style without leaving the\ncomponent.\n\n```tsx\n<Skeleton width={120} height={16} style={{ marginBottom: 8 }} />\n```\n\n## Props\n\n<PropsTable component=\"Skeleton\" />\n"
}