# Motion Skeleton Pack

Skeleton loader for a code block or file viewer.

- id: `motion-skeleton-pack`
- Page: https://agentic-ui-kit.com/components/motion-skeleton-pack
- Live preview: https://agentic-ui-kit.com/live/component/motion-skeleton-pack?piece=motion-skeleton-pack

## Install

```bash
agentic-ui add motion-skeleton-pack
npx shadcn@4.17.0 add @agentic-ui/motion-skeleton-pack
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** code-block-skeleton, receipt-skeleton, report-skeleton, list-skeleton, chat-skeleton, optional-shimmer, line-count-prop, status-role-with-label, reduced-motion-fallback
- **Intents:** track-status
- **Suits domains:** saas, devtools, ai-workspace, ecommerce, finance
- **Interaction:** motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** skeleton loader for a code block or file viewer, receipt or invoice loading placeholder, chat conversation skeleton while messages load, report or article loading skeleton with optional shimmer
- **Avoid when:** Dashboard cards, tables and charts that need a synchronized shimmer (use motion-skeleton-shimmer), Loads shorter than about 300 ms, where a placeholder only flashes, A long wait that needs progress or a message instead of a placeholder
- **Preserve when adapting:** status-role-label, aria-hidden-drawing, shimmer-pauses-offscreen
- **Replace when adapting:** preset, line-count, label, frame
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion