chrome

<tc-skeleton>

Shimmering placeholder shown while content is loading. Respects `prefers-reduced-motion`.

import "@ra9/tan-compose-kit/skeleton"

Props

Name	Type	Default	Description
`width`	`string`	`"100%"`	Any CSS length, e.g. `"120px"` or `"60%"`.
`height`	`string`	`"1em"`	Any CSS length. Defaults to one line of text.
`rounded`	`boolean`	`false`	Render as a circle. Useful for avatar placeholders.
`pulse`	`boolean`	`true`	Animate a shimmer across the bone. Disable for static placeholders.

CSS variables

Variable	Default	Description
`--tc-skeleton-base`	`var(--tc-color-rule, #ece5d3)`	Base color of the placeholder.
`--tc-skeleton-shine`	`rgba(255, 255, 255, 0.6)`	Highlight color used in the shimmer animation.
`--tc-skeleton-radius`	`var(--tc-radius-md, 6px)`	Corner radius (ignored when `rounded` is true).

Examples

Basic usage

<tc-skeleton width="60%" height="1.4em"></tc-skeleton> <tc-skeleton width="80%" height="1em"></tc-skeleton> <tc-skeleton width="40%" height="1em"></tc-skeleton>

Avatar placeholder

<tc-skeleton width="48px" height="48px" rounded></tc-skeleton>

Static (no shimmer)

Disable the animation when you have many skeletons on screen, or when you want a calmer feel.

<tc-skeleton width="100%" height="1em" pulse="false"></tc-skeleton>

Inside a card

Compose with tc-card and tc-stack for a full content-loading state.

<tc-card> <tc-stack gap="2"> <tc-skeleton width="40%" height="1.4em"></tc-skeleton> <tc-skeleton width="100%" height="1em"></tc-skeleton> <tc-skeleton width="92%" height="1em"></tc-skeleton> <tc-skeleton width="78%" height="1em"></tc-skeleton> </tc-stack> </tc-card>

Theming

<tc-skeleton style="--tc-skeleton-base: #e2e8f0; --tc-skeleton-shine: rgba(255,255,255,0.8);" width="200px" height="20px" ></tc-skeleton>

Accessibility

The placeholder is aria-hidden="true" — screen readers skip it, which is correct: there's no content to announce.
The shimmer animation is suppressed under prefers-reduced-motion: reduce; the bone falls back to a static muted block.
For long loads, consider also announcing "Loading…" with a live region near the skeletons so non-sighted users know something is happening.

← All components