# Skeleton

> A decorative loading placeholder rendered as a single static block, sized to stand in for the content it precedes and showing a still, inert silhouette while data loads.

```ts
import { Skeleton } from "@sdxc/ui";
```

A static loading placeholder: a rounded block filled with the neutral
border color, sized to its container and one text line tall by default.
Compose `pulse()` or `shimmer()` through `mix` for a motion cue.

## Examples

```tsx
<Skeleton mix={[pulse()]} />
```

```tsx
<Skeleton style={{ blockSize: "2.5rem", inlineSize: "2.5rem", borderRadius: "9999px" }} />
```

```tsx
<Skeleton aria-hidden="false" aria-label={t("status.loadingProfile")} />
```

## Props

Also accepts everything in `TagProps<"div">`.