组件
Skeleton 内容占位
让等待保留布局，让实际内容进入时不惊扰阅读。
Skeleton 适合已知大致结构、正在首次加载的内容。按最终文本和图片尺寸安排占位，避免用大量随机骨架制造虚假的进度。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/skeleton.json首次使用请先完成 Registry 与主题接入。
组合与状态
组件使用轻量脉冲效果，在减少动态效果偏好下停止动画。高度和宽度通过 className 配置；完整列表占位可以直接使用 States 中的 ListSkeleton。
<div role="status" aria-label="正在加载文章" aria-busy="true">
<Skeleton className="h-4 w-3/5" />
<Skeleton className="mt-2 h-3 w-2/5" />
</div>Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
className | string | — | 必须配置实际占位尺寸 |
aria-hidden | 原生 span 属性 | true | 视觉占位不被逐项朗读 |
| 其他属性 | 原生 span 属性 | — | 布局和数据属性 |
键盘与约束
占位元素不应进入焦点顺序。父区域提供一个清晰的加载名称；内容到达后替换占位，避免加载状态长期残留。
避免这样使用
不要用 Skeleton 表示空数据或错误；刷新已有内容时通常保留内容并显示轻量刷新反馈；不要让骨架尺寸与最终布局完全不同。
来源与版本
0.1.0，来自 Subtic apps/web/components/ui/skeleton.tsx。保留原生 span 与减少动态效果支持。