Skeleton
FreePulse loading skeleton with SkeletonCard and SkeletonProfile presets for common UI patterns.
Loaders · primitive · basic · css · zero dependencies
Skeleton · SkeletonProfile · SkeletonCard — rounded md / lg / full
Pulse loading skeleton with SkeletonCard and SkeletonProfile presets for common UI patterns.
- dashboard data table loading state
- user profile card loading state
- feed and list item loading placeholder
- component library preview loading
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional classes for width, height, and layout. |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Corner radius of the skeleton block. |
Does Skeleton work with Next.js App Router?
Yes. It ships as a "use client" component for consistency with the rest of the library and works unchanged in the App Router.
Are there any dependencies to install?
None. It uses Tailwind's built-in animate-pulse utility — no external packages required.
Is it responsive?
Yes. Size is fully controlled by the className you pass; the SkeletonCard and SkeletonProfile presets use relative widths that adapt to their container.
Does it respect prefers-reduced-motion?
Not automatically. animate-pulse is a continuous CSS animation with no built-in reduced-motion guard — add motion-reduce:animate-none to the className if you need to respect that preference.