Skeleton Loader
NewFree
Skeleton shapes you compose freely, all lit by one shimmer, that cross-fade into the real content when it loads.
Customize
Stay loading
1.6s
0.45s
#4a3b32
When to use it
- Feeds and dashboards while their data is being fetched
- Profile and product cards that should not shift when content arrives
- Slow search results or reports that take a few seconds
Good to know
- Plan
- Free, MIT license
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 306
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/skeleton-loader.jsonWorks in any project set up with the shadcn CLI.
- Copy the code from the Code tab into
components/ui/skeleton-loader.tsx.
Free under the MIT license. If it saved you time, star the repo on GitHub: it helps other developers find it.
Usage
import { Skeleton, SkeletonLoader, SkeletonText } from "@/components/ui/skeleton-loader";
<SkeletonLoader
loading={!post}
fallback={
<div className="flex gap-3">
<Skeleton shape="circle" size={44} />
<SkeletonText lines={3} />
</div>
}
>
{post ? <Post {...post} /> : null}
</SkeletonLoader>Props
15 properties| Property | Type | Default | Description |
|---|---|---|---|
| loading | boolean | — | SkeletonLoader. True shows the skeleton, false cross-fades into the children. |
| fallback | ReactNode | — | SkeletonLoader. Skeleton shapes laid out like the content that replaces them. |
| children | ReactNode | — | SkeletonLoader. The real content, rendered only once loading is false. |
| duration | number | 1.6 | SkeletonLoader. Seconds for one sweep of the shimmer. |
| baseColor | string | "#211d1a" | SkeletonLoader. Fill of the shapes. |
| highlightColor | string | "#4a3b32" | SkeletonLoader. Color of the band of light. |
| angle | number | 105 | SkeletonLoader. Direction of the band, in degrees. |
| fade | number | 0.45 | SkeletonLoader. Seconds for the cross-fade into the content. |
| label | string | "Loading" | SkeletonLoader. Announced to screen readers while loading. |
| shape | "rect" | "text" | "circle" | "pill" | "rect" | Skeleton. Sets the default size and corners. |
| width / height / size | number | string | — | Skeleton. Dimensions; size sets both, handy for circles. |
| radius | number | string | — | Skeleton. Corner radius. |
| lines | number | 3 | SkeletonText. Number of lines, with slightly uneven widths. |
| lastLineWidth | number | string | "62%" | SkeletonText. Width of the last line. |
| className | string | — | Extra classes for the wrapper. |