Skeleton

Placeholder shown while content loads, shaped like the content it replaces.

import { Skeleton } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Skeleton } from '@basiiik/ui';

<Skeleton />

Skeleton has no states. It is aria-hidden; mark the loading region aria-busy. Use width and height to fit real content; the pulse is off under prefers-reduced-motion.
Storybook: Feedback/Skeleton.

Props

Prop	Type	Notes
`shape`	`"text" \| "circle" \| "rect"`	Default "text"
`size`	`"sm" \| "md" \| "lg"`	Default "md"

Other props

Prop	Type	What it does
`width`	`string \| number`	Override the width (number = px). Use `'100%'` to fill a container.
`height`	`string \| number`
`animate`	`boolean`	Pulse animation (default true). Automatically off under `prefers-reduced-motion`.

States. Skeleton has no states. It is aria-hidden; mark the loading region aria-busy. Use width and height to fit real content; the pulse is off under prefers-reduced-motion.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Loading content of unknown duration

Do not use it when

Known-duration progress (use Progress)

Rules for agents

Set aria-busy="true" on the region being loaded while Skeletons show, and remove it when the content arrives
Match the shape and size of the real content: shape="text" for lines, "circle" for avatars, "rect" for media and cards
Use width and height to mirror the final layout so nothing shifts when the content loads
Announce completion yourself (for example a polite status message) when the loaded content matters

Avoid

A Skeleton for a task with known progress such as an upload (use Progress)
Skeletons that never resolve; show an Empty State with variant="error" when loading fails
Skeleton shapes that do not match the content, causing layout shift
Using Skeletons for content that loads almost instantly, which only adds flicker
Putting text or interactive content inside a Skeleton

Accessibility

aria-busy="true" on the container being loaded
Announce completion via a live region if needed

Colour tokens it reads

color.bg.muted

feedback 9 Figma variants Try it in the live demo