Skeleton

An animated placeholder shown while content loads.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add skeleton --yes

The skeleton registry item installs these files:

app/components/ui_component.rb
app/components/ui/skeleton_component.rb
app/helpers/ui/skeleton_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Size each placeholder with utility classes. The skeleton is decorative by default (aria-hidden="true"); announce the loading state on an element of its own (e.g. a region with aria-busy).

<%= ui_skeleton(class: "h-4 w-48") %>

Or render the component Ui::SkeletonComponent directly:

<%= render Ui::SkeletonComponent.new(class: "size-10 rounded-full") %>

Examples

Default

Combine shapes to sketch the content that is loading.

<div class="flex items-center gap-4">
  <%= ui_skeleton(class: "size-10 rounded-full") %>
  <div class="grid gap-2">
    <%= ui_skeleton(class: "h-4 w-36") %>
    <%= ui_skeleton(class: "h-4 w-24") %>
  </div>
</div>

Card

A placeholder for media cards with lines of text.

<div class="flex flex-col gap-3">
  <%= ui_skeleton(class: "h-32 w-64 rounded-xl") %>
  <div class="grid gap-2">
    <%= ui_skeleton(class: "h-4 w-56") %>
    <%= ui_skeleton(class: "h-4 w-40") %>
  </div>
</div>

API reference

ui_skeleton(**options, &block) wraps Ui::SkeletonComponent.new(**options).

Argument	Type	Default	Description
`class` / `class_name`	String	`nil`	The placeholder's size and shape (`h-4 w-48`, `rounded-full`, …).
`**attrs`	Hash	`{}`	Free-form HTML attributes. `aria: { hidden: "false" }` exposes the element to screen readers.