shadcn-rails

Skeleton

Use to show a placeholder while content is loading.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component skeleton

Usage

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

Examples

Basic Line

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

Table

With Turbo Frame

Skeletons work great as loading placeholders in Turbo Frames.

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

</turbo-frame>

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