# Skeleton

Holds the place of content that's still loading.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<div>
  <Skeleton sx={styles.avatar} />
  <Skeleton sx={styles.line} />
</div>
```

## Installation

```bash
npx shadcn@latest add @constella/skeleton
```

## Usage

```tsx
import { Skeleton } from "@/components/primitives/skeleton";
```

Give it the size and shape of what it stands in for with `sx`.

```tsx
<Skeleton sx={styles.line} />
```

## Card

Fill a [Card](https://constella.aayush.cv/docs/components/card/index.md) with skeletons in the shape of its content.

```tsx
<Card>
  <CardHeader>
    <Skeleton sx={styles.title} />
  </CardHeader>
  <CardContent>
    <Skeleton sx={styles.image} />
  </CardContent>
</Card>
```

## Item

Keep the real layout and swap only what's loading, so nothing moves when the content arrives.

```tsx
<Item>
  <ItemMedia>
    {loading ? <Skeleton sx={styles.avatar} /> : <Avatar>…</Avatar>}
  </ItemMedia>
  <ItemContent>
    {loading ? <Skeleton sx={styles.title} /> : <ItemTitle>{name}</ItemTitle>}
  </ItemContent>
</Item>
```

## API Reference

`Skeleton` renders a `div` hidden from screen readers, and takes `sx`, applied last.