Blocks

Skeleton

A pulsing placeholder block. Shape it entirely with utilities — the component brings only the pulse and the surface color.

Installation

bin/rails g shadcnrb:component skeleton

Example

<div class="flex items-center gap-3">
  <%= sui.skeleton class: "size-10 rounded-full" %>
  <div class="space-y-2">
    <%= sui.skeleton class: "h-4 w-40" %>
    <%= sui.skeleton class: "h-4 w-28" %>
  </div>
</div>

Card

<div class="flex flex-col gap-3">
  <%= sui.skeleton class: "h-32 w-64 rounded-xl" %>
  <div class="space-y-2">
    <%= sui.skeleton class: "h-4 w-64" %>
    <%= sui.skeleton class: "h-4 w-48" %>
  </div>
</div>

As a lazy loading state

Skeletons are the natural loading state for lazy-loaded panels — the block body of a src: dialog / hover_card / dropdown_menu, or the loading: option in kwarg form. The lazy sections on those components' pages use them.

sui.hover_card src: user_preview_path(user) do |h|
  h.trigger { sui.link_to user.name, user_path(user) }
  tag.div class: "flex gap-3" do
    sui.skeleton(class: "size-10 shrink-0 rounded-full") +
      tag.div(class: "flex-1 space-y-2 py-1") do
        sui.skeleton(class: "h-3 w-24") + sui.skeleton(class: "h-3")
      end
  end
end

API

Method	Args	Description
`sui.skeleton`	`**opts`	A `bg-accent animate-pulse rounded-md` div; size and shape via `class:`