Skeleton

UI::Skeleton

A pulsing placeholder shown in a piece of content's shape while it loads.

bin/rails generate velvetkit:add skeleton

Also adds: Nothing else
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Shapes

shapes.html.erb

<div class="flex flex-col gap-6">
  <div class="space-y-2">
    <%= render(UI::Skeleton.new(shape: :text, class: "w-64")) %>
    <%= render(UI::Skeleton.new(shape: :text, class: "w-48")) %>
    <%= render(UI::Skeleton.new(shape: :text, class: "w-56")) %>
  </div>
  <%= render(UI::Skeleton.new(shape: :circle)) %>
  <%= render(UI::Skeleton.new(shape: :rectangle, class: "w-64")) %>
</div>

Card Placeholder

card_placeholder.html.erb

<%= render(UI::Card.new(class: "w-80 p-6")) do %>
  <div class="flex items-center gap-4">
    <%= render(UI::Skeleton.new(shape: :circle)) %>
    <div class="flex-1 space-y-2">
      <%= render(UI::Skeleton.new(shape: :text, class: "w-3/4")) %>
      <%= render(UI::Skeleton.new(shape: :text, class: "w-1/2")) %>
    </div>
  </div>
  <%= render(UI::Skeleton.new(shape: :rectangle, class: "mt-4")) %>
<% end %>

API

Arguments

UI::Skeleton.new(shape: :text, class: nil, **html_attrs)

Notes

UI::Skeleton — a pulsing placeholder shown in a piece of content's shape while it loads. Purely visual: aria-hidden, since there's nothing here for a screen reader to announce. Pair it with a surrounding region that does the announcing (role="status", like UI::Spinner already sets up) if the loading state itself needs to be heard.