React Skeleton & Spinner
Loading states that match the calm of the rest of the system: Skeleton is a muted pulsing block you compose into card/table placeholders, SkeletonText renders paragraph lines with a naturally shorter last line, and Spinner is a small arc with an optional visible label. No shimmer gradients — a quiet pulse is enough.
Loading lots…Compiling waveform database…
Installation
npx shadcn@latest add skeleton.json
Usage
Loading...
Props
| Component | Props | Description |
|---|---|---|
| Skeleton | className + div attributes | Size/shape via classes (h-3 w-24, rounded-md) |
| SkeletonText | lines?: number (default 3) | Paragraph placeholder |
| Spinner | size?: 'sm' \ | 'md' \ |