Skeleton

Home Skeleton

The Skeleton component displays a loading placeholder to indicate that content is being fetched or processed. It enhances perceived performance and provides visual feedback to users.

use Lib\PHPXUI\{
    Skeleton
};

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

Installation

npm

npx phpxui add Skeleton

Usage

use Lib\PHPXUI\Skeleton

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

Examples

Card

<?php

use Lib\PHPXUI\Skeleton;

?>

<div class="flex flex-col space-y-3">
    <Skeleton class="h-[125px] w-[250px] rounded-xl" />
    <div class="space-y-2">
        <Skeleton class="h-4 w-[250px]" />
        <Skeleton class="h-4 w-[200px]" />
    </div>
</div>

Skeleton const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Skeleton'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage

Examples

Card