Skeleton v0.1.0 Feedback

Loading placeholder with text/circle/rect variants and reduced-motion support.

import { Skeleton } from "latticeui-react";

Examples

Loading card

Compose variants to mirror the final layout and avoid content shift.

Show code

<div style={{ display: "flex", gap: 12 }}>
  <Skeleton variant="circle" width={40} height={40} />
  <div style={{ flex: 1 }}>
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="text" width="90%" />
    <Skeleton height={80} />
  </div>
</div>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="skeleton"][data-part="root"]`

Props

Prop	Type	Default	Description
`variant`	`"rect" \| "text" \| "circle"`	`"rect"`
`width / height`	`number \| string`	—

Accessibility

Roles:

aria-hidden; announce loading state separately (e.g. Spinner with a label).

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="skeleton"][data-part="root"] {
  /* your overrides */
}

State attributes: data-variant