Skeleton
Placeholder to show a loading state before content loads.
import { Skeleton } from "@/components/ui/skeleton";
const SkeletonDemo = () => {
return (
<div className="flex items-center gap-4">
<Skeleton className="size-12 rounded-full" />
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-48" />
<Skeleton className="h-4 w-32" />
</div>
</div>
);
};
export default SkeletonDemo;
Installation
npx shadcn@latest add @ark-cn/skeletonInstall the dependency required by this primitive:
npm install @ark-ui/reactCopy the component source into your app:
TSXcomponents/ui/skeleton.tsx
"use client";
import { ark } from "@ark-ui/react/factory";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export const Skeleton = ({
className,
...props
}: ComponentProps<typeof ark.div>) => {
return (
<ark.div
data-slot="skeleton"
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
);
};
Update import aliases to match your project setup.
Usage
import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="h-4 w-48" />Examples
Default
import { Skeleton } from "@/components/ui/skeleton";
const SkeletonDemo = () => {
return (
<div className="flex items-center gap-4">
<Skeleton className="size-12 rounded-full" />
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-48" />
<Skeleton className="h-4 w-32" />
</div>
</div>
);
};
export default SkeletonDemo;
Card
import { Skeleton } from "@/components/ui/skeleton";
const SkeletonCard = () => {
return (
<div className="flex flex-col gap-3 rounded-lg border p-4 w-64">
<Skeleton className="h-40 w-full rounded-md" />
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
</div>
);
};
export default SkeletonCard;