Skeleton

feedback

Loading placeholder with shimmer pulse animation. Three variants (text/circle/rectangle), configurable dimensions, multi-line text support, and aria-hidden for accessibility. Composable for card, profile, and list loading states.

Import

typescript
import { Skeleton } from "packages/ui/src";

Props

SkeletonProps

PropTypeRequired
varianttext|circle|rectangleNo
widthstring|numberNo
heightstring|numberNo
linesnumberNo

Examples

Skeleton

Loading placeholder with shimmer animation for text, circles, and rectangles. 23rd shared component — 8 dedicated tokens.

Interactive Playground

Variants

Text (3 lines)

Circle

Rectangle

Composite Skeletons

Card Loading State

Profile Loading State

List Loading State

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionLoading placeholder with shimmer pulse animation. Three variants (text/circle/rectangle), configurable dimensions, multi-line text support, and aria-hidden for accessibility. Composable for card, profile, and list loading states.
PropsSkeletonProps (variant?: text|circle|rectangle, width?: string|number, height?: string|number, lines?: number)
Statestext-single, text-multi, circle, rectangle, shimmer-pulse
A11y
  • All skeleton elements are aria-hidden=true
  • Actual loading content should use aria-busy on parent
Responsive
  • Width fills container by default
  • Circle maintains aspect ratio
Motion
  • Pulse animation 1.5s ease-in-out infinite
Token Dependencies
  • components.skeleton.baseColor
  • components.skeleton.highlightColor
  • components.skeleton.borderRadius
  • components.skeleton.animationDuration
  • components.skeleton.textHeight
  • components.skeleton.textSpacing
  • components.skeleton.circleSize
  • components.skeleton.opacity
Content Slots
CMS Bindings
  • Used as placeholder while CMS content loads
Test Cases
  • Renders text variant by default
  • Renders circle variant
  • Renders rectangle variant
  • Renders multiple lines
  • Last line is shorter in multi-line
  • Has aria-hidden
  • Applies custom width
  • Passes className through