reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Skeleton
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Skeleton

Component

Reserve space while loading with text, circular, rectangular, and preset skeleton components.

indicator
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Basic Shapes

Loading...
Loading...
Loading...
Loading...

SkeletonText

1 line

Loading...

3 lines

Loading...

SkeletonAvatar

Loading...
Loading...
Loading...
Loading...

SkeletonCard

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

SkeletonTable

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Combined Example

Loading...
Loading...
Loading...
Loading...

Usage guidance

Best practices

  • Match the expected content size and row count to reduce layout shifts. Describe the loading state on the container.

Usage to avoid

  • Do not replace empty results or request errors with a skeleton that never finishes.

Usage examples

Reserve space while a list loads

Skeleton

PropTypeDefaultDescription
variant"text" | "circular" | "rectangular""text"스켈레톤 형태
widthstring | number—너비 (px 또는 CSS 값)
heightstring | number—높이 (px 또는 CSS 값)
linesnumber1text variant일 때 줄 수
animatedbooleantrue펄스 애니메이션 활성화

SkeletonText

PropTypeDefaultDescription
linesnumber3텍스트 줄 수

SkeletonAvatar

PropTypeDefaultDescription
sizenumber40아바타 크기 (px)

SkeletonTable

PropTypeDefaultDescription
rowsnumber5테이블 행 수
columnsnumber4테이블 열 수

컴포넌트 의존 관계

깊이
▲ USED BY (1)summary-rowSkeleton
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • status role을 갖는다
  • sr-only 텍스트를 포함한다
  • variant에 따른 스타일을 적용한다
  • width와 height를 적용한다
  • animated=false로 애니메이션을 비활성화한다

Related components

opt-ui

Kbd

Core

Display keyboard shortcuts as inline key badges.

opt-ui

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

opt-ui

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

opt-ui

Toolbar

Core

Group actions in a toolbar with buttons, separators, and tooltips.

opt-ui

Badge

Core

Display inline status badges with five color variants and an optional status dot.

opt-ui

Spinner

Core

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

PreviousSwitchNextTextarea