Skeleton

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

Usage

1import { Skeleton } from "@raystack/apsara";

Skeleton Props

Prop

Type

Examples

Basic Usage

A simple skeleton loader with fixed dimensions.

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

Multiple Lines

Create multiple skeleton lines using the count prop.

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

Using Provider

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

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

Custom Styles

Customize the appearance using baseColor and highlightColor.

1<Flex direction="column" gap="medium">
2  <Skeleton
3    width={200}
4    height={20}
5    baseColor="var(--rs-color-background-accent-primary)"
6    highlightColor="var(--rs-color-background-accent-emphasis)"
7  />
8</Flex>

Animation Control

Control the animation duration or disable it entirely.

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

Complex Layout

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

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

Provider Pattern

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

1<Skeleton.Provider
2  baseColor="var(--rs-color-background-base-secondary)"
3  height="24px"
4  duration={2}
5>
6  <Skeleton /> {/* Inherits provider props */}
7  <Skeleton width="75%" /> {/* Inherits provider props, overrides width */}
8  <Skeleton
9    height="48px"
10    borderRadius="50%"
11  /> {/* Overrides specific props */}
12</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