Skeleton — uicraft

Default

Basic skeleton line placeholders.

html

<div class="uc-space-y-3">
  <div class="uc-h-4 uc-bg-neutrals-muted uc-animate-pulse uc-rounded"></div>
  <div class="uc-h-4 uc-bg-neutrals-muted uc-animate-pulse uc-rounded uc-w-4/5"></div>
  <div class="uc-h-4 uc-bg-neutrals-muted uc-animate-pulse uc-rounded uc-w-3/5"></div>
</div>

Card Skeleton

Skeleton mimicking a card layout, shown alongside the loaded state.

Card Title

This is a description for the card with some details about the content that it represents.

List Skeleton

Skeleton mimicking a list of items.

JD

John Doe

john@example.com

AS

Alice Smith

alice@example.com

BW

Bob Wilson

bob@example.com

Profile Skeleton

Skeleton mimicking a user profile with avatar and text.

html

<div class="uc-flex uc-items-center uc-gap-4 uc-mb-4">
  <div class="uc-w-16 uc-h-16 uc-bg-neutrals-muted uc-animate-pulse uc-rounded-full"></div>
  <div class="uc-flex-1 uc-space-y-2">
    <div class="uc-h-5 uc-bg-neutrals-muted uc-animate-pulse uc-rounded uc-w-1/2"></div>
    <div class="uc-h-3 uc-bg-neutrals-muted uc-animate-pulse uc-rounded uc-w-1/3"></div>
  </div>
</div>
<div class="uc-space-y-2">
  <div class="uc-h-3 uc-bg-neutrals-muted uc-animate-pulse uc-rounded"></div>
  <div class="uc-h-3 uc-bg-neutrals-muted uc-animate-pulse uc-rounded uc-w-5/6"></div>
</div>

SA

Sarah Anderson

Product Designer

Passionate about creating intuitive user experiences. Working at the intersection of design and technology for over 8 years.

Table Skeleton

Skeleton mimicking a data table.

Name	Email	Role	Status

API Reference

All CSS classes available for the Skeleton component.

Class	Type	Description
`uc-bg-neutrals-muted`	Base	Muted background color for skeleton placeholders
`uc-animate-pulse`	Base	Pulsing animation to indicate loading state
`uc-rounded`	Shape	Rounded corners for text-line skeletons
`uc-rounded-full`	Shape	Fully round shape for avatar/circle skeletons
`uc-rounded-2xl`	Shape	Large rounded corners for card skeletons
`uc-w-*`	Size	Width utilities (uc-w-3/4, uc-w-1/2, etc.) to vary line lengths
`uc-h-*`	Size	Height utilities (uc-h-3, uc-h-4, uc-h-5) to set line thickness

Accessibility

Keyboard and screen reader support.

Feature	Details
Status	Use aria-busy="true" on the container while content is loading
Label	Add aria-label="Loading" on skeleton elements for screen readers
Hidden	Hide skeletons from screen readers with aria-hidden="true" if a loading announcement exists
Announcement	Use aria-live="polite" to announce when content has loaded