Skeleton

Used to show a placeholder while content is loading.

Installation

import { Skeleton } from "@gradeui/ui"

Usage

Examples

Device Card Loading

Stats Loading

Table Loading

Chart Loading

Profile Loading

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes to control size and shape.

Accessibility

Uses subtle animation to indicate loading state
Consider using aria-busy on parent containers
Provide aria-label for screen readers if needed
Animation respects prefers-reduced-motion

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/skeleton.md and shipped inside the published @gradeui/ui tarball.

---
name: Skeleton
import: "@gradeui/ui"
props:
  - className?: string — required in practice; supply width/height utilities
  - All native div HTML attrs
when_to_use: Loading placeholder for content whose shape you know. Set width/height via className to mimic the real content (e.g. "h-4 w-32"). Not a spinner — use it where the real thing will drop in.
composes_with: [Card, Avatar (inside a Skeleton for avatar loading), any layout]
aliases: [placeholder, shimmer, loader, loading state, redacted, redacted placeholder, shimmer placeholder, content placeholder, lottie placeholder]
---

```jsx
<div className="space-y-2">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>
```

Table

Separator