Skeleton

Neutral placeholders for content that is still loading. Use sparingly — only on the parts of the screen that change between loads.

Included in the single kansho full pack. Components are not offered as separate installs.

Primitives

Atomic shapes

Text block

Multi-line paragraph

Avatar row

Profile or list-row placeholder

Card

Surface with title, body, action

Table

Header + four rows

Form

Two labelled fields and submit

Chart

Header, axis, bars

Message bubble

Conversation placeholder

Component documentation

Skeleton

components/loaders/skeleton.tsx

Purpose

Shows non-interactive placeholder geometry while content is loading.

Appropriate use

Use when preserving the approximate layout reduces perceived movement during a short load.

Example

components/loaders/skeleton.tsx has a representative live example in the "Primitives" section on /components/skeleton.

States

Supports rect, text, circle, and line shapes, custom dimensions, pulse animation, and SkeletonText row count.

API and props

Skeleton accepts shape, width, height, native div props, and ref; SkeletonText accepts lines, lastWidth, and className.

Dependencies

React and the Kansho cn utility.

Accessibility

Skeleton geometry is aria-hidden so assistive technology waits for the real content rather than reading placeholders.

Limitations

It does not announce loading or reserve semantics; pair it with an appropriately labelled container when status must be conveyed.

Source

Source: components/loaders/skeleton.tsx.

Full pack

components/loaders/skeleton.tsx is documented at /components/skeleton and installs only through the single Kansho full pack; no individual component install is offered.