Skeleton

Free

Pulse loading skeleton with SkeletonCard and SkeletonProfile presets for common UI patterns.

Loaders · primitive · basic · css · zero dependencies

skeleton Loaders·preview
Loading

Skeleton · SkeletonProfile · SkeletonCard — rounded md / lg / full

Skeleton

Pulse loading skeleton with SkeletonCard and SkeletonProfile presets for common UI patterns.

Free component

Free at launch — join the waitlist and unlock it day one.

Join the waitlist

No card required.

Use it for
  • dashboard data table loading state
  • user profile card loading state
  • feed and list item loading placeholder
  • component library preview loading
Props
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.
FAQ
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.