Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/hero_ui/skeletonimport { Skeleton } from "@heroui/react";
export default function AnimationTypes() {
return (
<div className="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div className="space-y-2">
<p className="truncate text-xs text-gray-500">Shimmer</p>
<div className="space-y-3 rounded-lg bg-transparent p-4">
<Skeleton animationType="shimmer" className="h-20 rounded-lg" />
<Skeleton animationType="shimmer" className="h-3 w-3/5 rounded-lg" />
<Skeleton animationType="shimmer" className="h-3 w-4/5 rounded-lg" />
</div>
</div>
<div className="space-y-2">
<p className="truncate text-xs text-gray-500">Pulse</p>
<div className="space-y-3 rounded-lg bg-transparent p-4">
<Skeleton animationType="pulse" className="h-20 rounded-lg" />
<Skeleton animationType="pulse" className="h-3 w-3/5 rounded-lg" />
<Skeleton animationType="pulse" className="h-3 w-4/5 rounded-lg" />
</div>
</div>
<div className="space-y-2">
<p className="truncate text-xs text-gray-500">None</p>
<div className="space-y-3 rounded-lg bg-transparent p-4">
<Skeleton animationType="none" className="h-20 rounded-lg" />
<Skeleton animationType="none" className="h-3 w-3/5 rounded-lg" />
<Skeleton animationType="none" className="h-3 w-4/5 rounded-lg" />
</div>
</div>
</div>
);
}