Skeleton
A component to display placeholder content while in a loading state.
Installation
npx shadcn@latest add @tetra-ui/skeletonUsage
import { Skeleton } from "@/components/ui/skeleton";<Skeleton className="h-4" />Skeleton group
Wrap multiple skeletons in SkeletonGroup so they pulse in sync:
import { Skeleton, SkeletonGroup } from "@/components/ui/skeleton";
import { Stack } from "@/components/ui/stack";
<SkeletonGroup>
<Stack direction="row" gap="sm">
<Skeleton className="size-12 rounded-full" />
<Stack className="flex-1" gap="sm">
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
</Stack>
</Stack>
</SkeletonGroup>Changelog
2026-05-21 Added SkeletonGroup component
Added a new SkeletonGroup component that allows you to group multiple skeletons together.