Skeleton

core

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

컴포넌트 의존 관계

깊이

100%

Basic Shapes

SkeletonText

1 line

3 lines

SkeletonAvatar

SkeletonCard

SkeletonTable

Combined Example

테스트 커버리지

2026년 2월 4일5/5 통과

5성공

0실패

5전체

status role을 갖는다
sr-only 텍스트를 포함한다
variant에 따른 스타일을 적용한다
width와 height를 적용한다
animated=false로 애니메이션을 비활성화한다

Skeleton Props

Prop	타입	기본값	설명
`variant`	`"text" \| "circular" \| "rectangular"`	`"text"`	스켈레톤 형태
`width`	`string \| number`	—	너비 (px 또는 CSS 값)
`height`	`string \| number`	—	높이 (px 또는 CSS 값)
`lines`	`number`	`1`	text variant일 때 줄 수
`animated`	`boolean`	`true`	펄스 애니메이션 활성화

SkeletonText Props

Prop	타입	기본값	설명
`lines`	`number`	`3`	텍스트 줄 수

SkeletonAvatar Props

Prop	타입	기본값	설명
`size`	`number`	`40`	아바타 크기 (px)

SkeletonTable Props

Prop	타입	기본값	설명
`rows`	`number`	`5`	테이블 행 수
`columns`	`number`	`4`	테이블 열 수

Import

tsx

import {
  Skeleton,
  SkeletonText,
  SkeletonAvatar,
  SkeletonCard,
  SkeletonTable,
} from "@reopt-ai/opt-ui";

Skeleton

core

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

컴포넌트 의존 관계

깊이

100%

Basic Shapes

SkeletonText

1 line

3 lines

SkeletonAvatar

SkeletonCard

SkeletonTable

Combined Example

테스트 커버리지

2026년 2월 4일5/5 통과

5성공

0실패

5전체

status role을 갖는다
sr-only 텍스트를 포함한다
variant에 따른 스타일을 적용한다
width와 height를 적용한다
animated=false로 애니메이션을 비활성화한다

Skeleton Props

Prop	타입	기본값	설명
`variant`	`"text" \| "circular" \| "rectangular"`	`"text"`	스켈레톤 형태
`width`	`string \| number`	—	너비 (px 또는 CSS 값)
`height`	`string \| number`	—	높이 (px 또는 CSS 값)
`lines`	`number`	`1`	text variant일 때 줄 수
`animated`	`boolean`	`true`	펄스 애니메이션 활성화

SkeletonText Props

Prop	타입	기본값	설명
`lines`	`number`	`3`	텍스트 줄 수

SkeletonAvatar Props

Prop	타입	기본값	설명
`size`	`number`	`40`	아바타 크기 (px)

SkeletonTable Props

Prop	타입	기본값	설명
`rows`	`number`	`5`	테이블 행 수
`columns`	`number`	`4`	테이블 열 수

Import

tsx

import {
  Skeleton,
  SkeletonText,
  SkeletonAvatar,
  SkeletonCard,
  SkeletonTable,
} from "@reopt-ai/opt-ui";