quadratic/ui

Skeleton

Use to show a placeholder while content is loading.

Installation

Follow the Quickstart guide if you haven't already.

Copy and paste the following code into your project.

import { cn } from "~/utils/tailwind";

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn("rounded-1.5 bg-muted animate-pulse", className)}
      {...props}
    />
  );
}

export { Skeleton };

Update the import paths to match your project setup.

Usage

import { Skeleton } from "~/components/ui/Skeleton";
 <Skeleton className="h-4 w-64" />