Skeleton

A shimmer placeholder that mirrors content layout while data loads.

Preview

Usage

import { Skeleton } from "anexui";

<Skeleton variant="text" width={200} />

Variants

<Skeleton variant="text" width={300} />
<Skeleton variant="circle" width={48} height={48} />
<Skeleton variant="rect" width="100%" height={160} />

Composing a card skeleton

import { Skeleton, Stack } from "anexui";

<Stack gap="3">
  <Skeleton variant="rect" width="100%" height={180} />
  <Skeleton variant="text" width="70%" />
  <Skeleton variant="text" width="50%" />
  <Stack direction="row" gap="2">
    <Skeleton variant="circle" width={32} height={32} />
    <Skeleton variant="text" width={120} />
  </Stack>
</Stack>

Props

| Prop | Type | Default | Description | |---|---|---|---| | variant | "text" \| "circle" \| "rect" | "text" | Shape of the skeleton | | width | string \| number | — | Width (px number or CSS string) | | height | string \| number | — | Height (px number or CSS string) |

Accessibility

• aria-hidden="true" — skeletons are decorative and must not be announced by screen readers
• Use a single <Spinner> or aria-live region to announce loading state to assistive technology