> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

> A placeholder component that displays an animated loading state to indicate content is being loaded.

## Import

```tsx theme={null}
import { Skeleton } from '@raystack/apsara';
```

## Usage

```tsx theme={null}
<Skeleton />
```

## Multiple lines

```tsx theme={null}
<Skeleton count={3} />
```

## Custom dimensions

```tsx theme={null}
<Skeleton width={200} height={20} />

<Skeleton width="100%" height="200px" />
```

## Inline skeleton

```tsx theme={null}
<div>
  <Skeleton inline width={100} /> is loading...
</div>
```

## Custom border radius

```tsx theme={null}
<Skeleton borderRadius={"var(--rs-radius-4)"} width={200} height={200} />

<Skeleton borderRadius="50%" width={48} height={48} />
```

## Without animation

```tsx theme={null}
<Skeleton enableAnimation={false} />
```

## Custom duration

```tsx theme={null}
<Skeleton duration={2.5} />
```

## Custom colors

```tsx theme={null}
<Skeleton 
  baseColor="#e0e0e0" 
  highlightColor="#f5f5f5" 
/>
```

## Loading patterns

### Card skeleton

```tsx theme={null}
import { Card, Flex } from '@raystack/apsara';

function CardSkeleton() {
  return (
    <Card>
      <Flex direction="column" gap="3">
        <Skeleton width={48} height={48} borderRadius="50%" />
        <Skeleton width="60%" height={24} />
        <Skeleton count={3} />
      </Flex>
    </Card>
  );
}
```

### List skeleton

```tsx theme={null}
function ListSkeleton() {
  return (
    <div>
      {[...Array(5)].map((_, i) => (
        <Flex key={i} gap="3" align="center" style={{ marginBottom: '1rem' }}>
          <Skeleton width={40} height={40} borderRadius="50%" />
          <div style={{ flex: 1 }}>
            <Skeleton width="80%" />
            <Skeleton width="60%" />
          </div>
        </Flex>
      ))}
    </div>
  );
}
```

### Table skeleton

```tsx theme={null}
function TableSkeleton() {
  return (
    <table style={{ width: '100%' }}>
      <thead>
        <tr>
          <th><Skeleton width="100%" /></th>
          <th><Skeleton width="100%" /></th>
          <th><Skeleton width="100%" /></th>
        </tr>
      </thead>
      <tbody>
        {[...Array(5)].map((_, i) => (
          <tr key={i}>
            <td><Skeleton /></td>
            <td><Skeleton /></td>
            <td><Skeleton /></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

### Profile skeleton

```tsx theme={null}
function ProfileSkeleton() {
  return (
    <Flex direction="column" align="center" gap="4">
      <Skeleton width={120} height={120} borderRadius="50%" />
      <Skeleton width={200} height={28} />
      <Skeleton width={300} height={20} />
      <Skeleton width="100%" height={100} />
    </Flex>
  );
}
```

## Using Skeleton.Provider

```tsx theme={null}
<Skeleton.Provider 
  baseColor="#e0e0e0" 
  highlightColor="#f5f5f5"
  duration={2}
>
  <Skeleton width={200} />
  <Skeleton width={300} />
  <Skeleton width={150} />
</Skeleton.Provider>
```

## Conditional rendering

```tsx theme={null}
function UserProfile() {
  const { user, isLoading } = useUser();

  if (isLoading) {
    return (
      <div>
        <Skeleton width={48} height={48} borderRadius="50%" />
        <Skeleton width={200} height={24} />
        <Skeleton count={2} />
      </div>
    );
  }

  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}
```

## API reference

### Skeleton

<ParamField path="width" type="string | number">
  Width of the skeleton. Can be a number (px) or string (e.g., "100%", "200px"). Defaults to "100%" for block elements or "50px" for inline elements.
</ParamField>

<ParamField path="height" type="string | number" default="var(--rs-space-4)">
  Height of the skeleton. Can be a number (px) or string (e.g., "100px", "2rem").
</ParamField>

<ParamField path="borderRadius" type="string | number" default="var(--rs-radius-2)">
  Border radius of the skeleton. Can be a number (px) or string.
</ParamField>

<ParamField path="inline" type="boolean" default="false">
  When true, renders the skeleton as an inline element.
</ParamField>

<ParamField path="count" type="number" default="1">
  Number of skeleton lines to render.
</ParamField>

<ParamField path="enableAnimation" type="boolean" default="true">
  Controls whether the skeleton displays the shimmer animation.
</ParamField>

<ParamField path="duration" type="number" default="1.5">
  Duration of the animation in seconds.
</ParamField>

<ParamField path="baseColor" type="string">
  Base color of the skeleton. Overrides the default theme color.
</ParamField>

<ParamField path="highlightColor" type="string">
  Highlight color used in the shimmer animation. Overrides the default theme color.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS class names to apply to the skeleton.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline styles to apply to the skeleton.
</ParamField>

<ParamField path="containerClassName" type="string">
  CSS class names to apply to the container element.
</ParamField>

<ParamField path="containerStyle" type="CSSProperties">
  Inline styles to apply to the container element.
</ParamField>

### Skeleton.Provider

Provides shared configuration for multiple skeleton components.

<ParamField path="baseColor" type="string">
  Base color applied to all child skeletons.
</ParamField>

<ParamField path="highlightColor" type="string">
  Highlight color applied to all child skeletons.
</ParamField>

<ParamField path="duration" type="number">
  Animation duration applied to all child skeletons.
</ParamField>

<ParamField path="enableAnimation" type="boolean">
  Controls animation for all child skeletons.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  The skeleton components to be wrapped by the provider.
</ParamField>