Neumorphism UI

Skeleton

用于在加载时预留最终内容的形状与空间，减少页面跳动。

预览

加载内容卡片

在命名的加载区域内预留封面、头像、标题与多行文字的位置。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/skeleton

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

让占位尺寸与最终内容对应。将外层区域标记为 busy，并提供一条简短加载提示，无需为每个装饰形状命名。

import { Skeleton } from "@/components/ui/skeleton";

export default function Example() {
  return (
    <div aria-busy="true">
      <span className="sr-only">Loading profile</span>
      <Skeleton className="h-4 w-40" />
    </div>
  );
}

API 参考

一个基于 div 的简单 pulse placeholder。它只提供视觉加载轮廓，并通过 aria-hidden=true 对辅助技术隐藏。

组件属性类型默认值说明
SkeletonclassName必填string—设置 placeholder 的宽度、高度和 radius。
Skeletonaria-hiddenbooleantrue将装饰性 placeholder 从无障碍树中隐藏。

无障碍

  • 01

    Skeleton 本身设置了 aria-hidden，因此应在周围另行提供 sr-only 状态文案或 role=status。

  • 02

    加载区域可按需设置 aria-busy=true，并在加载完成后移除。

  • 03

    pulse 动画会依据全局 prefers-reduced-motion 规则基本停用。