Skeleton

Feedback
Loading

Display placeholder content while data is loading.

Preview

Card loading state example

Variants

Different skeleton shapes

Text (default)

Circle

Rectangle

Common Patterns

Skeleton layouts for typical UI elements

User Card

Article

Form Field

Stat Card

Props

Skeleton component API reference

PropTypeDefaultDescription
variant'text' | 'circle' | 'rectangle''text'Shape variant
widthstring | number—Width (px or %)
heightstring | number—Height (px or em)
classNamestring—Additional CSS classes

Usage

Import and implementation examples

import { Skeleton } from '@/components/ui/skeleton'

// Text placeholder
<Skeleton width="60%" height="1em" />

// Circle (avatar placeholder)
<Skeleton variant="circle" width={48} height={48} />

// Rectangle (image placeholder)
<Skeleton variant="rectangle" width="100%" height={200} />

// Card loading state
<div className="flex items-start gap-4">
  <Skeleton variant="circle" width={48} height={48} />
  <div className="flex-1 space-y-2">
    <Skeleton width="40%" height="1.2em" />
    <Skeleton width="100%" height="1em" />
    <Skeleton width="80%" height="1em" />
  </div>
</div>

Features

Built-in functionality

  • 3 variants: Text, circle, and rectangle shapes
  • Flexible sizing: Width and height support px, em, and % units
  • Pulse animation: Built-in loading animation
  • Composable: Combine multiple skeletons for complex layouts
  • Dark mode: Adjusted colors for dark mode

Accessibility

Accessibility considerations

ARIA Attributes

Uses aria-hidden="true" since content is decorativeLoading state should be communicated separately

Keyboard Navigation

KeyAction
N/ASkeleton is not interactive

Notes

  • Use aria-busy on parent container when loading
  • Announce loading state with aria-live region
  • Respect prefers-reduced-motion for animations

Related Components

SpinnerProgressCard