Skeleton

Interactive

See Skeleton in Storybook for every variant, with live controls.

A shimmering placeholder for content that's still loading.

import { Skeleton } from "@kairosis/eidos";

<div style={{ display: "flex", gap: 12 }}>
  <Skeleton circle width={32} height={32} />
  <Skeleton width="60%" />
</div>;

Props

Prop	Type	Default	Description
`width`	`number \| string`	`"100%"`	Any CSS width; numbers become px
`height`	`number \| string`	`14`	Any CSS height
`circle`	`boolean`	`false`	For avatar placeholders

Guidelines

Mirror the shape of what's coming — a 60% bar for a title, a circle for an avatar. A skeleton that doesn't match causes a visible jump on load.
It's aria-hidden: it's a visual placeholder, not content. Announce loading state separately (see Spinner's label).
The shimmer respects prefers-reduced-motion and stops animating.
For a spinner-style wait on an action, use Spinner. Skeletons are for content-shaped waits.

Props​

Guidelines​

Props

Guidelines