maud-ui64 components

Skeleton

Loading post

Loading table row

CustomerPlanStatusMRR

Loading product card

Usage

use maud_ui::primitives::skeleton;

let html = skeleton::render(skeleton::Props {
    variant: skeleton::Variant::Text,
    width: Some("200px".into()),
    height: Some("1rem".into()),
});

Skeleton

Loading placeholder with shimmer animation. Renders as a bare <div> with aria-hidden="true" so it's skipped by screen readers. Supports three shape variants and custom width/height dimensions.

Import

use maud_ui::primitives::skeleton::{self, Variant, Props};

Example

use maud::html;
use maud_ui::primitives::skeleton;

// Default rect
html! {
    (skeleton::render(skeleton::Props::default()))
}

// Text line
html! {
    (skeleton::render(skeleton::Props {
        variant: skeleton::Variant::Text,
        width: Some("8rem".into()),
        height: Some("0.875rem".into()),
    }))
}

// Circle avatar
html! {
    (skeleton::render(skeleton::Props {
        variant: skeleton::Variant::Circle,
        width: Some("2.75rem".into()),
        height: Some("2.75rem".into()),
    }))
}

// Loading post card
html! {
    div style="display:flex;gap:0.75rem;" {
        // Avatar
        (skeleton::render(skeleton::Props {
            variant: skeleton::Variant::Circle,
            width: Some("2.75rem".into()),
            height: Some("2.75rem".into()),
        }))
        div style="flex:1;" {
            // Title line
            (skeleton::render(skeleton::Props {
                variant: skeleton::Variant::Text,
                width: Some("60%".into()),
                height: Some("1rem".into()),
            }))
            // Body line 1
            (skeleton::render(skeleton::Props {
                variant: skeleton::Variant::Text,
                width: Some("100%".into()),
                height: None,
            }))
            // Body line 2
            (skeleton::render(skeleton::Props {
                variant: skeleton::Variant::Text,
                width: Some("85%".into()),
                height: None,
            }))
        }
    }
}

Props

FieldTypeDefaultDescription
variantVariantRectShape: Text, Circle, or Rect.
widthOptionNoneOptional width CSS override (e.g., "8rem", "100%").
heightOptionNoneOptional height CSS override.

Variant Enum

VariantUse CaseDimensions
TextLoading text lines (name, title, etc.).Default: 1em height, 100% width. Aspect is typically wide & shallow.
CircleLoading avatars, profile pictures.Default: square (aspect 1:1). Set both width and height equally.
RectLoading images, cards, blocks.Default: square (aspect 1:1) or use width/height.

Accessibility

  • Every skeleton has aria-hidden="true" so screen readers skip it.
  • When page is fully loaded, skeletons are replaced with real content; no announcement needed.
  • ARIA live regions (e.g., aria-live="polite") should wrap the entire loading container so screen readers announce when content loads.

CSS Classes

ClassPurpose
mui-skeletonRoot skeleton element.
mui-skeleton--textText variant (wide, shallow shimmer).
mui-skeleton--circleCircle variant (square aspect).
mui-skeleton--rectRect variant (default; square or custom dimensions).

Sizing

By default, skeletons are square (except Text, which is wider). Override with:

  • width="100%" — stretch to container width.
  • height="1rem" — set explicit height (common for text lines).
  • Both set — define exact dimensions.

Common patterns:

Use CaseProps
Text line (name)variant: Text, width: "8rem", height: "0.875rem"
Body paragraph (3 lines)Render 3x variant: Text, width: "100%", last one width: "65%"
Avatarvariant: Circle, width: "2.75rem", height: "2.75rem"
Product imagevariant: Rect, width: "100%", height: "11rem"
Status badgevariant: Rect, width: "4.5rem", height: "1.25rem"

Animation

The shimmer animation is defined in the CSS module (mui-skeleton). Customisation varies by theme. The animation plays on a loop while the skeleton is mounted.

Related

Spinner, Card, Progress.

Shadcn reference

https://ui.shadcn.com/docs/components/base/skeleton

← Back to Gallery