Components · Feedback

Skeleton

A loading placeholder that mirrors the shape of the content it stands in for, with a subtle shimmer sweep. Use it instead of a spinner when the layout is known in advance.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

skeleton

backgroundColor: {colors.skeleton-bg}
shimmerColor: {colors.skeleton-shimmer}
borderRadius: {rounded.base}
animationDuration: 1.5s

Build with the skill

No package to install — hand this to your AI to generate the skeleton in your stack.

Prompt for your AI

Implement the Zetta "Skeleton" component in this project's stack using the zetta-design-md skill.

- Apply the `skeleton` spec from the skill.
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

skeleton-bg base with a skeleton-shimmer sweep, 8px radius, 1.5s cycle (use rounded.full for avatars).
Match the size/shape of the real content to avoid layout shift; mark the region aria-busy="true" (or aria-hidden). Honor prefers-reduced-motion.

Known gaps

A card-level skeleton pattern is not yet specified.