Create Next App

OPEN

Skeleton

Skeleton is used to represent a loading state of a component. You can give any container a skeleton effect by using the Skeleton component.

Preview


import { Skeleton } from "@/components/Skeleton";
import React from "react";

const Page = () => {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  );
};

export default Page;

Copy and paste the following code into your project.

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

const Skeleton = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-gray-300", className)}
      {...props}
    />
  );
};

export { Skeleton };