Components

Skeleton

Docs

Skeleton · SkeletonItem API.

API

Skeleton은 레이아웃 래퍼, SkeletonItem은 펄스 블록입니다. 변형 prop 없이 className으로 구성합니다.

import { Skeleton, SkeletonItem } from "@/components/skeleton";

{/* 텍스트 라인 */}
<Skeleton className="flex w-full max-w-sm flex-col gap-2">
  <SkeletonItem className="h-4 w-3/4" />
  <SkeletonItem className="h-4 w-full" />
  <SkeletonItem className="h-4 w-5/6" />
</Skeleton>

{/* 아바타 + 라인 */}
<Skeleton className="flex w-full max-w-sm items-center gap-3">
  <SkeletonItem className="size-10 shrink-0 rounded-full" />
  <div className="flex min-w-0 flex-1 flex-col gap-2">
    <SkeletonItem className="h-4 w-1/2" />
    <SkeletonItem className="h-3 w-full" />
  </div>
</Skeleton>

{/* 카드 그리드 */}
<Skeleton className="grid w-full grid-cols-1 gap-4 md:grid-cols-3">
  <SkeletonItem className="h-32 w-full rounded-[var(--radius-12)]" />
  <SkeletonItem className="h-32 w-full rounded-[var(--radius-12)]" />
  <SkeletonItem className="h-32 w-full rounded-[var(--radius-12)]" />
</Skeleton>

Props

Name	Type	Default	Description
`Skeleton.className`	`string`	—	래퍼 레이아웃 (flex / grid / gap 등).
`Skeleton.children`	`ReactNode`	—	SkeletonItem 또는 커스텀 블록을 직접 배치.
`SkeletonItem.className`	`string`	—	칸 크기·모양·색 (h-4 w-full, bg-[#hex], bg-[rgba(...)], bg-[var(--token)] 등). 기본: pulse + surface-neutral + radius-8.

Notes

기본 스타일: animate-pulse, bg surface-neutral, rounded radius-8.
색 커스텀: className에 bg-*를 주면 기본 배경을 제거하고 그대로 적용 (hex/rgba/var 포함).
범용성: variant prop 없음. 필요한 UI는 children 매핑 + className으로 구성.
접근성: Skeleton role=status · aria-busy. Item은 aria-hidden.