Skeleton · Overview

스토리북 개발자들을 위한 내부 문서

Components

Skeleton

Overview

Skeleton은 로딩 중 자리 표시용 플레이스홀더입니다. Skeleton(래퍼) + SkeletonItem(칸)을 children으로 직접 조합합니다. 레이아웃·크기·모양은 모두 className(Tailwind)으로 지정합니다.

Basic

Skeleton + SkeletonItem. children으로 라인을 직접 배치합니다.

  • wrapperclassName으로 flex/gap 등 레이아웃.
  • itemclassName으로 높이·너비.

텍스트 라인

짧은 라벨

Composition

실제 UI 영역의 형태를 children + className으로 조합.

아이콘 + 텍스트

리스트 행 ×3

카드 그리드

Style

배경색, 크기 등 기타 스타일 요소는 className으로 덮어쓸 수 있습니다.

  • default기본 펄스 배경 (white/default와 대비).
  • custombg-[var(--token)], bg-[#hex], bg-[rgba(...)] 등 Tailwind 배경 유틸로 덮어씀.

neutral (default)

token · var()

hex · bg-[#22c55e]

rgba · bg-[rgba(...)]