# VelvetKit

## Skeleton (`UI::Skeleton`)

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

Add it: `bin/rails generate velvetkit:add skeleton`

### Arguments

```ruby
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.

### Example: Shapes

```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>
```

### Example: Card Placeholder

```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 %>
```