Skeleton
Use to show a placeholder while content is loading.
Usage
import { Skeleton } from "@smartacteam/ambient-web/skeleton";<Skeleton />import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function 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-62" />
<Skeleton className="h-4 w-50" />
</div>
</div>
);
}import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function SkeletonAvatarDemo() {
return (
<div className="flex w-fit items-center gap-4">
<Skeleton className="size-10 shrink-0 rounded-full" />
<div className="grid gap-2">
<Skeleton className="h-4 w-62" />
<Skeleton className="h-4 w-50" />
</div>
</div>
);
}import { Card } from "@smartacteam/ambient-web/card";
import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function SkeletonCardDemo() {
return (
<Card.Root className="w-full max-w-xs">
<Card.Header>
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-4 w-1/2" />
</Card.Header>
<Card.Content>
<Skeleton className="aspect-video w-full" />
</Card.Content>
</Card.Root>
);
}import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function SkeletonForm() {
return (
<div className="flex w-full max-w-xs flex-col gap-7">
<div className="flex flex-col gap-3">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-8 w-full" />
</div>
<div className="flex flex-col gap-3">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-8 w-full" />
</div>
<Skeleton className="h-8 w-24" />
</div>
);
}import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function SkeletonTableDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-2">
{Array.from({ length: 5 }).map((_, index) => (
<div className="flex gap-4" key={index}>
<Skeleton className="h-4 flex-1" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-20" />
</div>
))}
</div>
);
}import { Skeleton } from "@smartacteam/ambient-web/skeleton";
export function SkeletonText() {
return (
<div className="flex w-full max-w-xs flex-col gap-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
</div>
);
}