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

    グローバルな prefers-reduced-motion 規則により、pulse animation は実質的に無効になります。