Skeleton

A placeholder while content loads.

1 file

<div class="flex items-center gap-4">
  <pb-ui.skeleton class="size-12 rounded-full" />
  <div class="space-y-2">
    <pb-ui.skeleton class="h-4 w-56" />
    <pb-ui.skeleton class="h-4 w-44" />
  </div>
</div>

Installation

pyblade-ui add skeleton

Copy this file into your project

components/ui/skeleton.html

<div data-slot="skeleton" {{ attributes.cn("animate-pulse rounded-md bg-accent") }}></div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.skeleton> is available in all your templates.

<pb-ui.skeleton class="h-4 w-48" />

Examples

Card

‹ Separator Progress ›