Skip to Content
FrontendBundlesComponentsUI PrimitivesSkeleton

Skeleton

An animated pulse placeholder element. Use to show the shape of content while it loads, improving perceived performance.

Import

import { Skeleton } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Skeleton";

Props

No specific props — accepts all standard HTML <div> attributes including className for sizing.

Usage

import { Skeleton } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Skeleton";
 
// Card placeholder
<div className="flex flex-col gap-3 p-4">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-32 w-full" />
</div>
 
// Table row placeholders
{loading && Array.from({ length: 5 }).map((_, i) => (
  <TableRow key={i}>
    <TableCell><Skeleton className="h-4 w-24" /></TableCell>
    <TableCell><Skeleton className="h-4 w-32" /></TableCell>
    <TableCell><Skeleton className="h-4 w-16" /></TableCell>
  </TableRow>
))}
Last updated on
SeparatorProgress