Skeleton

Skeleton - Phlex implementation

Examples

Default

Use to show a placeholder while content is loading.

<div class="flex items-center space-x-4">
  <%= render "ui/skeleton", class: "h-12 w-12 rounded-full" %>
  <div class="space-y-2">
    <%= render "ui/skeleton", class: "h-4 w-[250px]" %>
    <%= render "ui/skeleton", class: "h-4 w-[200px]" %>
  </div>
</div>

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

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

Card

A card skeleton with image and text placeholders.

<div class="flex flex-col space-y-3">
  <%= render "ui/skeleton", class: "h-[125px] w-[250px] rounded-xl" %>
  <div class="space-y-2">
    <%= render "ui/skeleton", class: "h-4 w-[250px]" %>
    <%= render "ui/skeleton", class: "h-4 w-[200px]" %>
  </div>
</div>

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

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

API Reference

Skeleton

A simple loading placeholder component with pulsing animation.