Neumorphism UI
データとフィードバック@neumorphism-ui/skeleton

Skeleton

単純な div ベースの pulse placeholder です。視覚的な読み込み形状だけを提供し、aria-hidden=true によって支援技術から隠されます。

@neumorphism-ui/skeleton
Registry JSON

プレビュー

インストール

インストール: skeletonnpx shadcn@latest add @neumorphism-ui/skeleton

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Skeleton の import コード
import { Skeleton } from "@/components/ui/skeleton"

Example

Skeleton の使用コード
<div className="flex items-center gap-3" aria-busy="true">
  <span className="sr-only">プロフィールを読み込み中</span>
  <Skeleton className="size-12 rounded-full" />
  <div className="grid flex-1 gap-2">
    <Skeleton className="h-4 w-1/3" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

API リファレンス

コンポーネントプロパティ型デフォルト説明
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 は実質的に無効になります。