Skeleton
Reserve space while content is still loading.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Loading states for content whose shape is known, like a profile or comment.
- Swapping a placeholder into real content with a crossfade and height spring.
- Use progress when you can report a percentage.
- Use empty-state when loading finished and there is nothing to show.
- Use text-shimmer for an AI thinking or status line.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Skeleton } from 'animui/skeleton';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Skeleton } from "animui/skeleton"; export function Profile({ user }: { user?: User }) { return ( <Skeleton avatar lines={2} loading={!user}> {user && <ProfileCard user={user} />} </Skeleton> );}Skeleton
A pulsing placeholder of text lines and an optional avatar that can crossfade into the loaded content.
PropTypeDefaultDescription
labelstring"Loading content"aria-label of the loading status.linesnumber3Number of text lines, clamped to 1-6.avatarbooleanfalseAdds a round avatar placeholder.childrenReactNode–Content to reveal once loading finishes. With children the placeholder crossfades into them.loadingbooleantrueKeeps the placeholder visible while true. Only used with children.classNamestring–Class on the outer element.- The placeholder is role="status" with aria-busy and an aria-label; its shapes are aria-hidden.
- With children, the wrapper sets aria-busy while loading.
- Blocks pulse in a staggered wave, each a beat after the one above.
- On load the placeholder fades out, content rises 4px into place, and the height springs from placeholder to content.
- Reduced motion stops the pulse and swaps with short fades and no height animation.
- Lines are percentages of the container width, so the placeholder scales with its slot.
- It only draws text lines and an avatar; build custom shapes for grids or media.
- The pulse is a CSS animation that stops under reduced motion.
- A ResizeObserver springs the height from placeholder to content; avoid hundreds of skeletons at once.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use while fetching content whose shape is known. Use progress when you can report a percentage, and empty-state when there is nothing to show.
- Wrap the real content as children and drive loading to get the crossfade; without children it renders only the placeholder.
The full library index for assistants is at /llms.txt.