Skeleton

A placeholder element that displays a loading state with an animated background.

<div class="flex items-center space-x-4">
    <twig:Skeleton class="h-12 w-12 rounded-full" />
    <div class="space-y-2">
        <twig:Skeleton class="h-4 w-[250px]" />
        <twig:Skeleton class="h-4 w-[200px]" />
    </div>
</div>

Installation

bin/console ux:install skeleton --kit shadcn

That's it!

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Skeleton.html.twig

<div
    class="{{ 'animate-pulse rounded-full bg-muted ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
></div>

Happy coding!

Usage

<twig:Skeleton class="h-[20px] w-[100px] rounded-full" />

Examples

Card

<div class="space-y-3">
    <twig:Skeleton class="h-[125px] w-[250px] rounded-lg" />
    <div class="space-y-2">
        <twig:Skeleton class="h-4 w-[250px]" />
        <twig:Skeleton class="h-4 w-[200px]" />
    </div>
</div>