- Docs
- components
- Skeleton
Skeleton
Use to show a placeholder while content is loading.
Copy and paste the following code into your project.
import { SkeletonStyles } from "./styles";
export interface SkeletonProps
extends Omit<React.ComponentProps<"div">, "children"> {}
export function Skeleton({ className, ...props }: SkeletonProps) {
return (
<div
{...props}
aria-busy="true"
aria-live="polite"
className={SkeletonStyles({ className })}
/>
);
}
Update the import paths to match your project setup.
import { Skeleton } from "~/components/ui/skeleton";
<Skeleton className="w-[100px] h-[20px] rounded-full" />