Skeleton Shimmer
A free skeleton loader for React with a soft, transform-only shimmer.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Skeleton Shimmer is a free skeleton loader for Next.js and React, styled with Tailwind, that composes line, circle and block placeholders into any loading layout. Wrap your shapes in a SkeletonGroup and a soft highlight sweeps across them on the GPU while the real content loads.
The shimmer moves with transform only and loops at 1.6s, one group owns the intersection and visibility observers so every placeholder pauses offscreen or when the tab is hidden, and reduced-motion users see a fully static two-tone surface. The group is a single role status region and the shapes are aria-hidden, so assistive technology hears one clear loading announcement.
Customise
Component settings update the preview and generated code together.
Content
Appearance
Advanced appearance
Appearance
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/loader-skeletonUsage
import { Skeleton } from "@/components/skeleton";
import { SkeletonGroup } from "@/components/skeleton-group";
export function Example() {
return (
<SkeletonGroup label="Loading profile" className="flex flex-col gap-4">
<div className="flex items-center gap-4">
<Skeleton variant="circle" />
<Skeleton variant="line" width="55%" />
</div>
<Skeleton variant="block" />
<Skeleton variant="line" />
</SkeletonGroup>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "line" | "circle" | "block" | "line" | Placeholder shape. Line and block default to 100% width; circle defaults to 2.5rem. |
| width | string | variant default | Shape width. Defaults to 100% for line and block, 2.5rem for circle. |
| height | string | variant default | Shape height. Defaults to 1rem for line, 6rem for block, and the resolved width for circle. |
| label | string | "Loading" | SkeletonGroup only. Visually hidden status text announced by assistive technology. |
| className | string | undefined | Additional classes merged onto the shape or the group wrapper. |
Customisation
Skeleton Shimmer exposes two Tier 3 CSS custom properties. Override --loader-skeleton-base to retint the placeholder surface and --loader-skeleton-highlight to retint the travelling shimmer, on :root or any ancestor, without touching the timing or transform.
:root {
--loader-skeleton-base: var(--muted);
--loader-skeleton-highlight: var(--border);
}Frequently asked questions
- Is Skeleton Shimmer free for commercial use?
- Yes. Skeleton Shimmer is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the skeleton loader accessible and performant?
- Yes. The SkeletonGroup is a single role status region with one visually hidden label, while the shapes are aria-hidden and hold no focusable content. The shimmer animates transform only and loops at 1.6s, one shared observer pauses every placeholder while offscreen or when the tab is hidden, and reduced-motion users see a completely static surface.
- How do I change the placeholder and shimmer colours?
- Override --loader-skeleton-base and --loader-skeleton-highlight from :root or any ancestor. The defaults map to your border and muted tokens, so the loader matches a vanilla shadcn theme out of the box.
Related components
More free loaders are on the way. Browse the full component library in the meantime.