Skeleton

Use to show a placeholder while content is loading.

1
import { Skeleton } from "@/components/ui/pxl/skeleton";
2

3
export default function SkeletonDemo() {
4
  return (
5
    <div className="flex w-full max-w-sm flex-col gap-3">
6
      <Skeleton className="h-32 w-full" />
7
      <Skeleton className="h-4 w-3/4" />
8
      <Skeleton className="h-4 w-1/2" />
9
    </div>
10
  );
11
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/skeleton

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { cn } from "@/lib/utils";
4

5
function Skeleton({ className, ...props }: ComponentProps<"div">) {
6
  return (
7
    <div
8
      data-slot="skeleton"
9
      className={cn(
10
        "animate-pulse pixel-border pixel-size-lg",
11
        className,
12
      )}
13
      {...props}
14
    />
15
  );
16
}
17

18
export { Skeleton };

Update the import paths to match your project setup.

Usage

import { Skeleton } from "@/components/ui/pxl/skeleton"

<Skeleton className="h-5 w-25 rounded-full" />