# Skeleton: Animations

> `animation` picks a sweeping `shimmer`, a soft `pulse`, or `none`.

Example: https://hextaui.com/docs/skeleton/examples/animations
Component docs: https://hextaui.com/docs/skeleton.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/skeleton-animations.json
```

This adds `components/examples/skeleton/animations.tsx` with the Skeleton component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/skeleton/animations.tsx"
import { Skeleton, type SkeletonAnimation } from "@/components/ui/skeleton"

const animations: SkeletonAnimation[] = ["shimmer", "pulse", "none"]

export function SkeletonAnimations() {
  return (
    <div className="grid w-full max-w-md grid-cols-3 gap-3">
      {animations.map((animation) => (
        <div key={animation} className="flex flex-col gap-2">
          <Skeleton animation={animation} className="h-16 w-full" />
          <span className="text-xs text-muted-foreground">{animation}</span>
        </div>
      ))}
    </div>
  )
}
```

## Props in this example

### Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `"shimmer" \| "pulse" \| "none"` | `"shimmer"` |  |

## More Skeleton examples

- [Shapes](https://hextaui.com/docs/skeleton/examples/shapes.md)
- [Text](https://hextaui.com/docs/skeleton/examples/text.md)
- [Wrap real content](https://hextaui.com/docs/skeleton/examples/wrap-content.md)
- [Inline](https://hextaui.com/docs/skeleton/examples/inline.md)
- [Fast load](https://hextaui.com/docs/skeleton/examples/fast-load.md)
- [Many rows](https://hextaui.com/docs/skeleton/examples/many-rows.md)
- [Right to left](https://hextaui.com/docs/skeleton/examples/rtl.md)