Skeleton

A placeholder loading state that mimics the layout of content while it's being loaded.

Usage

The Skeleton component is used to create placeholder loading states that represent the layout of content while it's being loaded. It provides a visual indication that content is loading and helps maintain layout stability.

import { Skeleton } from "@raystack/apsara/v1";
 
<Skeleton width={200} height={20} />;

Skeleton Props

Prop	Type	Default
`width`	`string \| number`	`"50px for inline, 100% otherwise"`
`height`	`string \| number`	`"var(--rs-space-4)"`
`baseColor`	`string`	`"var(--rs-color-background-base-primary-hover)"`
`highlightColor`	`string`	`"var(--rs-color-background-base-primary)"`
`borderRadius`	`string \| number`	`"var(--rs-radius-2)"`
`inline`	`boolean`	`false`
`duration`	`number`	`1.5`
`enableAnimation`	`boolean`	`true`
`count`	`number`	`1`
`className`	`string`	-
`style`	`CSSProperties`	-
`containerClassName`	`string`	-
`containerStyle`	`CSSProperties`	-

Examples

Basic Usage

A simple skeleton loader with fixed dimensions.

<Flex direction="column" gap="medium">
  <Skeleton width={200} height={15} />
</Flex>

Multiple Lines

Create multiple skeleton lines using the count prop.

<Flex direction="column" gap="medium">
  <Skeleton width={200} height={15} count={3} />
</Flex>

Using Provider

Group multiple skeletons and share common props using Skeleton.Provider.

<Flex direction="column" gap="medium">
  <Skeleton.Provider height="24px" duration={2}>
    <Flex gap={4}>
      <Skeleton width="48px" height="48px" borderRadius="50%" />
      <Flex direction="column" gap={2} style={{ flex: 1 }}>
        <Skeleton width="200px" />
        <Skeleton width="150px" />
      </Flex>
    </Flex>
  </Skeleton.Provider>
</Flex>

Custom Styles

Customize the appearance using baseColor and highlightColor.

<Flex direction="column" gap="medium">
  <Skeleton
    width={200}
    height={20}
    baseColor="var(--rs-color-background-accent-primary)"
    highlightColor="var(--rs-color-background-accent-emphasis)"
  />
</Flex>

Animation Control

Control the animation duration or disable it entirely.

<Flex direction="column" gap="medium">
  <Skeleton width={200} height={20} duration={2.5} />
  <Skeleton width={200} height={20} enableAnimation={false} />
</Flex>

Complex Layout

Create a card-like loading state by combining multiple skeletons.

<Flex direction="column" gap="medium" style={{ width: "300px" }}>
  <Skeleton height={200} /> {/* Image placeholder */}
  <Skeleton height={20} width="80%" /> {/* Title placeholder */}
  <Skeleton height={15} count={3} /> {/* Text lines placeholder */}
</Flex>

Provider Pattern

The Skeleton component supports a Provider pattern that allows you to share common props across multiple skeleton instances:

<Skeleton.Provider
  baseColor="var(--rs-color-background-base-secondary)"
  height="24px"
  duration={2}
>
  <Skeleton /> {/* Inherits provider props */}
  <Skeleton width="75%" /> {/* Inherits provider props, overrides width */}
  <Skeleton 
    height="48px"  
    borderRadius="50%" 
  /> {/* Overrides specific props */}
</Skeleton.Provider>

All props available on the Skeleton component can be passed to the Provider and will be inherited by child Skeleton components. Individual Skeleton components can override any provider props with their own values.

Accessibility

The Skeleton component follows accessibility best practices:

Uses semantic HTML elements
Provides appropriate ARIA attributes
Maintains sufficient color contrast
Animation can be disabled for users who prefer reduced motion
Supports both block and inline layouts

SkeletonnewNEW