Docs
Skeleton
Skeleton
Use to show a placeholder while content is loading.
import { Skeleton } from "@repo/tailwindcss/default/skeleton";
const SkeletonDemo = () => {
return (
<div class="flex items-center space-x-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
);
};
export default SkeletonDemo;import { Skeleton } from "@repo/tailwindcss/solid/skeleton";
const SkeletonDemo = () => {
return (
<div class="flex items-center space-x-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
);
};
export default SkeletonDemo;Installation
Copy and paste the following code into your project:
Copy and paste the following code into your project:
npx shadcn-solid@latest add skeletonUsage
import { Skeleton } from "@/components/ui/skeleton";<Skeleton class="w-100px h-20px rounded-full" />