# Skeleton

Decorative placeholder (a fade, so it stays under reduced motion).

Source page: https://sproutboat.com/ikada/components/skeleton

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/skeleton.json
```
Or from the package: `import { Skeleton } from "@sproutboat/ikada";`
## Usage
```tsx
import { Skeleton } from "@/components/ikada/skeleton";

<div aria-busy="true" className="flex w-56 flex-col gap-2">
  <Skeleton className="w-3/4" />
  <Skeleton />
  <Skeleton className="w-1/2" />
</div>
```
## Examples
### Lines
Siblings start 120ms apart, so a block of lines swells top to bottom. Decorative: mark the region aria-busy.
```tsx
<div aria-busy="true" className="flex w-56 flex-col gap-2">
  <Skeleton className="w-3/4" />
  <Skeleton />
  <Skeleton className="w-1/2" />
</div>
```
### Kinds
Line is the default; block stands in for a chart or image, circle for an avatar.
```tsx
<Skeleton variant="line" />
<Skeleton variant="block" />
<Skeleton variant="circle" />
```
### Sprout row
Keep the layout of the loaded row so nothing jumps when the data arrives.
```tsx
<div aria-busy="true" className="flex items-center gap-3">
  <Skeleton variant="circle" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="w-24" />
    <Skeleton className="w-40" />
  </div>
</div>
```
## Props
### SkeletonProps
Also takes every prop of `Omit<ComponentProps<"span">, "children">, VariantProps<typeof skeletonStyles>`.
| Prop | Type | Description |
| --- | --- | --- |
| kind? | `"circle" \| "line" \| "block"` | @deprecated Use `variant`; removed in 0.3.0. |
| variant? | `"circle" \| "line" \| "block" \| null` |  |
Source: https://github.com/baronunread/ikada/blob/main/src/components/skeleton.tsx