SutraUI.Skeleton (Sutra UI v0.2.0)

View Source

Used to show a placeholder while content is loading.

The skeleton component provides a visual placeholder with an animated pulse effect to indicate that content is being loaded.

Examples

# Basic skeleton for text
<.skeleton class="h-4 w-[250px]" />

# Skeleton for a circular avatar
<.skeleton class="size-10 rounded-full" />

# Multiple skeletons for a card layout
<div class="flex items-center gap-4">
  <.skeleton class="size-10 shrink-0 rounded-full" />
  <div class="grid gap-2">
    <.skeleton class="h-4 w-[150px]" />
    <.skeleton class="h-4 w-[100px]" />
  </div>
</div>

Accessibility

  • Uses role="status" to indicate loading state
  • Has aria-label="Loading..." for screen readers

Summary

Functions

skeleton(assigns)

Renders a skeleton loading placeholder.

Functions

skeleton(assigns)

Renders a skeleton loading placeholder.

Attributes

  • width (:string) - Width of the skeleton (e.g., '200px', '50%'). Defaults to nil.
  • height (:string) - Height of the skeleton (e.g., '24px', '3rem'). Defaults to nil.
  • radius (:string) - Border radius variant. Defaults to "md". Must be one of "none", "sm", "md", "lg", or "full".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id", "role", "aria-label"].