shadcn-rails

Skeleton

Use to show a placeholder while content is loading.

No JavaScript Required
skeleton/default 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>

Installation

Add the component to your project:

rails generate shadcn:add skeleton

Usage

<%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>

Examples

Basic Line

<%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>

Avatar

Use rounded-full for circular shapes.

<div class="flex items-center space-x-4">
  <%= render Shadcn::SkeletonComponent.new(class_name: "h-12 w-12 rounded-full") %>
  <div class="space-y-2">
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[200px]") %>
  </div>
</div>

Card

<div class="flex flex-col space-y-3">
  <%= render Shadcn::SkeletonComponent.new(class_name: "h-[125px] w-[250px] rounded-xl") %>
  <div class="space-y-2">
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[200px]") %>
  </div>
</div>

Article List

<div class="space-y-6 w-full max-w-md">
    <div class="flex space-x-4">
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-20 w-20 rounded-lg shrink-0") %>
      <div class="flex-1 space-y-2 py-1">
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-3/4") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-full") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/2") %>
      </div>
    </div>
    <div class="flex space-x-4">
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-20 w-20 rounded-lg shrink-0") %>
      <div class="flex-1 space-y-2 py-1">
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-3/4") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-full") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/2") %>
      </div>
    </div>
    <div class="flex space-x-4">
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-20 w-20 rounded-lg shrink-0") %>
      <div class="flex-1 space-y-2 py-1">
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-3/4") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-full") %>
        <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/2") %>
      </div>
    </div>
</div>

Table

<div class="w-full max-w-lg space-y-3">
  <div class="flex space-x-4">
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
  </div>
  <%= render Shadcn::SeparatorComponent.new %>
  <% 4.times do %>
    <div class="flex space-x-4">
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-1/4") %>
    </div>
  <% end %>
</div>

With Turbo Frame

Skeletons work great as loading placeholders in Turbo Frames.

<turbo-frame id="user-profile">

</turbo-frame>

<div class="p-4 border rounded-lg border-dashed">
  <p class="text-xs text-muted-foreground mb-3 font-mono">&lt;turbo-frame id="user-profile"&gt;</p>
  <div class="flex items-center space-x-4">
    <%= render Shadcn::SkeletonComponent.new(class_name: "h-12 w-12 rounded-full") %>
    <div class="space-y-2">
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[150px]") %>
      <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[100px]") %>
    </div>
  </div>
  <p class="text-xs text-muted-foreground mt-3 font-mono">&lt;/turbo-frame&gt;</p>
</div>

Circle

skeleton/circle 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-12 w-12 rounded-full") %>

Rectangle

skeleton/rectangle 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-[125px] w-[250px] rounded-xl") %>

Text Line

skeleton/text_line 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-full") %>

Button

skeleton/button 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-10 w-[120px] rounded-md") %>

Profile

skeleton/profile 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-12 w-12 rounded-full") %>

Article

skeleton/article 
<%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[320px]") %>

API Reference

API Reference

Prop Type Default Description
class_name String nil CSS classes to control size and shape (h-*, w-*, rounded-*)

Common Class Patterns

Use Case Classes
Text line h-4 w-[200px]
Avatar h-12 w-12 rounded-full
Image/Card h-[125px] w-[250px] rounded-xl
Button h-10 w-[100px]

Accessibility

  • Skeletons use animate-pulse for subtle animation
  • Consider adding aria-busy="true" to container elements while loading
  • Use aria-live="polite" regions to announce when content loads
  • Ensure skeleton layouts match the actual content layout to reduce layout shift