Skip to content

index.mdx

Latest commit

 

History

History
102 lines (67 loc) · 2.27 KB

index.mdx

File metadata and controls

102 lines (67 loc) · 2.27 KB
title Skeleton
description A placeholder loading state that mimics the layout of content while it's being loaded.
source packages/raystack/components/skeleton

import { playground, basicDemo, multipleDemo, customStylesDemo, animationDemo, cardDemo, providerDemo, } from "./demo.ts";

Anatomy

Import and assemble the component:

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

<Skeleton />

API Reference

Renders a placeholder loading animation that mimics content layout.

Examples

Basic Usage

A simple skeleton loader with fixed dimensions.

Multiple Lines

Create multiple skeleton lines using the count prop.

Using Provider

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

Custom Styles

Customize the appearance using baseColor and highlightColor.

Animation Control

Control the animation duration or disable it entirely.

Complex Layout

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

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
  • Respects motion preferences: skeleton shimmer is enabled only when prefers-reduced-motion: no-preference
  • Supports both block and inline layouts