Components
Loading preview...
Display placeholder content while loading to improve perceived performance.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/skeletonimport { Skeleton,
SkeletonText,
SkeletonAvatar,
SkeletonButton,
SkeletonCard
} from "@/components/ui/skeleton";
export default function DemoOne() {
return (
<div className="rounded-lg border p-4 sm:p-6 space-y-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
<SkeletonAvatar size="lg" />
<div className="space-y-2 flex-1 w-full">
<Skeleton className="h-4 w-full sm:w-1/3" />
<Skeleton className="h-3 w-3/4 sm:w-1/2" />
</div>
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-4/5" />
<Skeleton className="h-4 w-3/5" />
</div>
<div className="flex flex-col sm:flex-row justify-between gap-4">
<SkeletonButton size="sm" />
<SkeletonButton size="sm" />
</div>
</div>
)
}