ホーム/コンポーネント/データ表示/スケルトン Skeleton

Skeleton

ローディング中のプレースホルダーを表示するスケルトンコンポーネント。

import { Skeleton } from "@blueai/ui"

Examples

Basic shapes

<Skeleton width={200} height={16} />
<Skeleton width={150} height={16} />
<Skeleton width="100%" height={12} />

Avatar skeleton

<Skeleton width={32} height={32} rounded="full" />

Card skeleton

<div className="border border-border rounded-xl p-5 space-y-3">
  <Skeleton width="60%" height={20} />
  <Skeleton width="100%" height={14} />
  <Skeleton width="80%" height={14} />
</div>

Props

Prop	Type	Default	Description
width	string \| number	—	幅
height	string \| number	—	高さ
rounded	"sm" \| "md" \| "full"	—	角丸（デフォルト: md）
className	string	—	追加CSSクラス