← Kitchen Sink로 돌아가기

Skeleton

콘텐츠 로딩 중 플레이스홀더로 사용하는 스켈레톤 컴포넌트

💡 참고: Skeleton 컴포넌트는 shadcn/ui 패턴 기반으로 구현되었습니다. class prop으로 크기와 모양을 지정합니다. 기본 스타일은 animate-pulse bg-gray-200입니다.

Basic

다양한 크기의 기본 스켈레톤
<Skeleton class="w-80 h-12" /> <Skeleton class="w-[200px] h-16" /> <Skeleton class="w-full h-20" /> <Skeleton class="w-full h-40" />

Props

Prop Type Default Description
class string "" 크기, 모양 등을 지정하는 Tailwind CSS 클래스
...attrs HTMLAttributes<'div'> - div 요소의 모든 HTML 속성 전달 가능