Skeleton Loader

A high-performance visual placeholder system used to reduce perceived loading times.

While standard Tailwind gives you the animate-pulse class, modern applications rely on Shimmer effects (a sleek gradient sliding across the background). This component injects its own pure CSS @keyframes to achieve a gorgeous shimmer. It provides composite templates out of the box (like Cards and Profiles), but also exposes top-level props so you can strictly define custom widths, heights, and border radii.

Explore the different variations of the Skeleton component — each example shows a live preview with the exact code to copy.

Card

A composite placeholder that mirrors a media card layout.

variant"card": outputs a pre-arranged composite rather than a single shape.
animation"shimmer": is the default — a gradient sliding across the placeholder.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Skeleton

npx shadcn@latest add @algorize-ui/skeleton

components/custom/blocks/SkeletonBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Skeleton needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Profile

Usevariant"profile": for an avatar with two text lines beside it.

Text

Usevariant"text": for stacked paragraph lines.

Rectangle

Usevariant"rect": as a block placeholder for images and charts. It is the default.

Circle

Usevariant"circle": for avatars and round icon slots.

Pulse animation

Useanimation"pulse": for the classic fading placeholder instead of the sliding shimmer.

No animation

Useanimation"none": for a static placeholder — the right choice under prefers-reduced-motion.

Custom composition

Usevariant"custom": to build atomic pieces yourself.
width: height and radius take a number or a CSS string, and are set inline so they override Tailwind classes.

Features

Learn about the Skeleton component's loading placeholder features, featuring a subtle pulsing animation that reduces perceived wait times.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`variant`	`"rect" \| "circle" \| "text" \| "profile" \| "card" \| "custom"`	`"rect"`	Determines the structural shape. `profile` and `card` output pre-arranged composite layouts.
`animation`	`"pulse" \| "shimmer" \| "none"`	`"shimmer"`	Determines the loading animation style. `shimmer` slides a gradient, `pulse` fades opacity.
`width`	`string \| number`	`undefined`	Sets an exact inline width (e.g. `200` or `"50%"`). Overrides Tailwind utility classes.
`height`	`string \| number`	`undefined`	Sets an exact inline height (e.g. `48` or `"100vh"`). Overrides Tailwind utility classes.
`radius`	`string \| number`	`undefined`	Sets an exact border-radius (e.g. `"1rem"` or `8`). Useful for perfect circles or custom rounding.
`className`	`string`	`undefined`	Allows you to pass custom Tailwind classes to manage layout constraints like margins or max-widths.