Skeleton - defuss-shadcn

On this page (4)

Component Skill — components/skeleton/component-skill.md

Native basis

CSS @keyframes pulse animation on placeholder <div> elements. No JavaScript required.

Web Platform APIs

Classes

.skeleton.skeleton-round

Accessibility

• Skeleton elements are decorative - screen readers should skip them

• Use aria-hidden="true" on skeleton containers if they sit alongside real content

• Announce the loading state separately with role="status" if needed

§Avatar + Text

Common pattern for user profile loading states.

§Card

Skeleton inside a card container.

§Text Lines

Paragraph placeholder.

§CSS view file

Styles for the skeleton component. Uses design tokens for colors, spacing, and radius.

@layer components {

  .skeleton {

    background-color: var(--accent);

    border-radius: var(--radius-md);

    animation: skeleton-pulse 2s ease-in-out infinite;

  .skeleton-round {

    border-radius: 9999px;

  @keyframes skeleton-pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.4; }

/* Accessibility: suppress motion for users who request it (REQUIRED for all

   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of

   `none` keeps transitionend/animationend (and discrete display flips)

   firing so JS state machines that await them keep working. */

@media (prefers-reduced-motion: reduce) {

  @layer components {

    .skeleton,

    .skeleton *,

    .skeleton::before,

    .skeleton::after,

    .skeleton *::before,

    .skeleton *::after,

    .skeleton::backdrop,

    .skeleton-round,

    .skeleton-round *,

    .skeleton-round::before,

    .skeleton-round::after,

    .skeleton-round *::before,

    .skeleton-round *::after,

    .skeleton-round::backdrop {

      transition-duration: 0.01ms !important;

      animation-duration: 0.01ms !important;

      animation-iteration-count: 1 !important;