Skeleton

インポート

import { Skeleton } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Skeleton } from '@caroainc/ui-components/skeleton'

基本的な使い方

<Skeleton className="h-4 w-[200px]" />

カード風

<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

テキストブロック

<div className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

複数の Skeleton を並べてローディング状態を表す場合は、Skeleton 自体には role/aria-* を付与せず、それらをまとめる親要素に role="status" と aria-label（例: "読み込み中"）を付けることを推奨します。個々の Skeleton に読み上げ用の役割を持たせると、スクリーンリーダーが要素数分「読み込み中」を連呼してしまうため、グループ単位で1回だけ伝えるのが適切です。

<div role="status" aria-label="読み込み中" className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

コンテンツが読み込み完了したら、この role="status" のブロックごとアンマウントし、実際のコンテンツに差し替えてください（読み込み中の状態をスクリーンリーダーに正しく伝えるため、読み込み中であることを示す要素として一時的にのみ存在させる）。

Props

Prop	Type	Default	Description
`className`	`string`	`-`	サイズや形状を指定するCSSクラス