Empty State With Illustration
Two variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
Shimmer Skeleton List
Loading placeholders with varied row widths and a sweep that is motion-safe only, falling back to a flat tint under reduced motion.
88 linesNo dependenciesAdded 8 Aug 2026Updated 25 Aug 2026
- skeleton
- loading
- shimmer
- placeholder
- reduced motion
What's included
components/skeleton-list.tsx- No runtime dependencies
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add skeleton-list
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Loading
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/skeleton-list.tsx
/**
* <SkeletonList> — loading placeholders for a list or table.
*
* Three things this gets right:
*
* - The shimmer is `motion-safe:` only. A sweeping gradient that never
* stops is exactly the kind of animation `prefers-reduced-motion` exists
* to suppress, and a skeleton is on screen at the moment a user is least
* able to look away from it. Reduced motion falls back to a flat tint.
* - Row widths vary. Identical bars read as a broken UI; a ragged right
* edge reads as text.
* - The container is `aria-busy` with a visually hidden status, so a
* screen reader hears "Loading" instead of silence — and the bars
* themselves are `aria-hidden` so they are not announced one by one.
*
* Server component — no state, no effects.
*/
import * as React from 'react'
export interface SkeletonListProps {
rows?: number
/** Include a leading circle per row. */
avatar?: boolean
label?: string
className?: string
}
/** Varied widths, cycled — so ten rows do not look like one row ten times. */
const WIDTHS = ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4', 'w-1/2']
export function SkeletonList({
rows = 5,
avatar = true,
label = 'Loading',
className = '',
}: SkeletonListProps) {
return (
<div
aria-busy="true"
className={`overflow-hidden rounded-2xl border border-border/60 bg-card/60 ${className}`}
>
<span className="sr-only" role="status">
{label}
</span>
{/* Declared once for the whole list, not once per bar. */}
<style>{`
@keyframes skeleton-sweep {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
`}</style>
<ul className="divide-y divide-border/40">
{Array.from({ length: rows }, (_, i) => (
<li key={i} aria-hidden className="flex items-center gap-4 px-5 py-4">
{avatar ? <Bar className="h-9 w-9 shrink-0 rounded-full" /> : null}
<div className="min-w-0 flex-1 space-y-2">
<Bar className={`h-3 rounded ${WIDTHS[i % WIDTHS.length]}`} />
<Bar className={`h-2.5 rounded ${WIDTHS[(i + 2) % WIDTHS.length]} opacity-70`} />
</div>
<Bar className="h-6 w-16 shrink-0 rounded-full" />
</li>
))}
</ul>
</div>
)
}
/**
* One placeholder bar.
*
* The sweep is a background gradient translated across a 200%-wide
* background, which animates compositor-side and does not touch layout.
* Under reduced motion the animation is simply absent and the flat
* `bg-muted` shows through.
*/
function Bar({ className = '' }: { className?: string }) {
return (
<span
className={`block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] ${className}`}
/>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Nothing to install. No component library, no icon package.
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/skeleton-list.tsx and import it where you need the section:
import { SkeletonList } from '@/components/skeleton-list'Customize
3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
rows | number | 5 |
avatarInclude a leading circle per row. | boolean | true |
label | string | 'Loading' |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
skeleton-list.html
<!--
Shimmer Skeleton List — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block has no interactive behaviour, so nothing is missing.
-->
<div aria-busy="true" class="overflow-hidden rounded-2xl border border-border/60 bg-card/60 ">
<span class="sr-only" role="status">Loading</span>
<style>@keyframes skeleton-sweep {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}</style>
<ul class="divide-y divide-border/40">
<li aria-hidden="true" class="flex items-center gap-4 px-5 py-4">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-9 w-9 shrink-0 rounded-full"></span>
<div class="min-w-0 flex-1 space-y-2">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-3 rounded w-3/5"></span>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-2.5 rounded w-2/5 opacity-70"></span>
</div>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-6 w-16 shrink-0 rounded-full"></span>
</li>
<li aria-hidden="true" class="flex items-center gap-4 px-5 py-4">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-9 w-9 shrink-0 rounded-full"></span>
<div class="min-w-0 flex-1 space-y-2">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-3 rounded w-4/5"></span>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-2.5 rounded w-3/4 opacity-70"></span>
</div>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-6 w-16 shrink-0 rounded-full"></span>
</li>
<li aria-hidden="true" class="flex items-center gap-4 px-5 py-4">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-9 w-9 shrink-0 rounded-full"></span>
<div class="min-w-0 flex-1 space-y-2">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-3 rounded w-2/5"></span>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-2.5 rounded w-1/2 opacity-70"></span>
</div>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-6 w-16 shrink-0 rounded-full"></span>
</li>
<li aria-hidden="true" class="flex items-center gap-4 px-5 py-4">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-9 w-9 shrink-0 rounded-full"></span>
<div class="min-w-0 flex-1 space-y-2">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-3 rounded w-3/4"></span>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-2.5 rounded w-3/5 opacity-70"></span>
</div>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-6 w-16 shrink-0 rounded-full"></span>
</li>
<li aria-hidden="true" class="flex items-center gap-4 px-5 py-4">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-9 w-9 shrink-0 rounded-full"></span>
<div class="min-w-0 flex-1 space-y-2">
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-3 rounded w-1/2"></span>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-2.5 rounded w-4/5 opacity-70"></span>
</div>
<span class="block bg-muted motion-safe:animate-[skeleton-sweep_1.6s_ease-in-out_infinite] motion-safe:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)] motion-safe:bg-[length:200%_100%] h-6 w-16 shrink-0 rounded-full"></span>
</li>
</ul>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Empty & Error States
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Empty & Error StatesShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Empty & Error States blocks
View categoryError State With Retry
Failed-to-load panel with a visible retry, a copyable error reference and the stack tucked behind a disclosure.
404 With Search & Suggestions
A 404 that helps: a real GET search form that works without JavaScript, likely destinations, and home as the fallback rather than the headline.
Permission Denied (403)
The state where the page exists and the account is not on the list: names who can grant access, sends the request, and leaks nothing about what is inside.
Offline With Queued Changes
Leads with what still works — three edits saved on this device — instead of with the failure. The retry backoff counts down in the open, and the three things that genuinely cannot work offline are named rather than discovered.
Empty Because of Filters
The empty state for a list emptied by its own filters: every active filter shown as a removable chip ordered by how many results it would restore, with clear-all deliberately second.
Scheduled Maintenance Window
Planned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.