Skeleton
Reserve a content shape while data is loading.
Preview
Import
import { Skeleton } from "@sigil-ui/components";Usage
<div className="flex flex-col gap-3 w-full max-w-sm">
<Skeleton className="h-6 w-3/4" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | SkeletonVariant | default | Shape / size preset. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-sm | Radius sm |
--s-radius-md | Radius md |
--s-radius-full | Radius full |
--s-radius-lg | Radius lg |
--s-text | Text |
--s-surface | Surface |
--s-duration-slow | Duration slow |