Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · skeleton

Skeleton

A decorative, reduced-motion-aware placeholder for application-owned loading states.

Install with npx @madojs/ui@latest add skeleton.

Primitive

Skeleton

Loading project overview

Composition

  • Place decorative skeleton shapes inside an application-owned loading state with real status text.

Public API

class mado-ui-skeleton
Decorative placeholder surface.
attribute data-shape
Optional text, circle or rectangular visual shape.
css-property --mado-ui-skeleton-duration
Finite shimmer timing before the surface settles.

Detected public classes

  • .mado-ui-skeleton

Detected public CSS properties

  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-radius-sm
  • --mado-ui-skeleton-background
  • --mado-ui-skeleton-block-size
  • --mado-ui-skeleton-duration
  • --mado-ui-skeleton-highlight
  • --mado-ui-skeleton-inline-size
  • --mado-ui-skeleton-radius

Accessibility contract

  • Mark decorative shapes aria-hidden and announce loading once from the owning state container.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Skeletons never enter the Tab sequence or replace focusable controls.

Fallback

  • Reduced motion and unsupported animation produce a static placeholder.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.