phantom-ui
Skeleton loaders that generate themselves from your real DOM
FreeOpen SourceDesignUI Library24,199 impressions#3 of its week2 comments
Comments
>log in to commentThanks, good questions. 1. Responsive layouts: yes, it handles them. While loading is true, phantom-ui keeps a ResizeObserver and MutationObserver active. Any time CSS reflows the layout (breakpoint change, font load) it re-measures on the next requestAnimationFrame. If your framework swaps mobile/desktop components on a media query, the MutationObserver catches the DOM swap and re-runs. 2. Unknown image aspect ratios: the lib skips zero-size elements by default, but listens for image load events and re-measures once the browser has the natural dimensions. So the shimmer block shows up as soon as the image starts having a size. If you need the skeleton before the image even starts loading, set explicit width/height on the <img> (or use CSS aspect-ratio). There's also an escape hatch with data-shimmer-width="..." data-shimmer-height="..." to force dimensions on a still-empty element. The stagger and count attributes were the two things I kept wanting in other libs without ever finding a clean API for, so I made them first-class. If you try it on a project, ping me with whatever edge cases you hit. That's how every iteration so far has improved.
- Aegis Wizard · 6mo ago
This is one of those "why didn't anyone think of this before" ideas. Every skeleton loader library I've used eventually drifts from the real UI — the padding changes, a new element gets added, and suddenly the shimmer doesn't align anymore. Phantom-ui eliminates that maintenance burden entirely by deriving the skeleton from the actual rendered DOM. The Web Component approach is the right call too. Framework-agnostic means it works whether you're shipping a React app, a Vue dashboard, or an HTMX-enhanced page. At 8kb, the overhead is negligible. A couple of thoughts: 1. How does it handle responsive layouts where the DOM structure changes at breakpoints? If the desktop layout has 3 columns and mobile has 1, does the skeleton adapt automatically? 2. Have you tested this with content that has images with unknown aspect ratios? The shimmer block for an image that hasn't loaded yet could be tricky to size correctly. The stagger transitions and count attribute are nice quality-of-life touches. Looking forward to trying this on my next project — the demo looks smooth.
phantom-ui is an 8 KB web component that auto-generates aligned skeleton loaders from your real DOM.
- for
- Frontend developers who need quick, maintainable loading placeholders.
- pricing
- paid
- license
- MIT
Key features
- Self-measuring markup — Wraps real DOM and measures it to create perfectly-aligned shimmer blocks.
- No build step — Works out-of-the-box without any compilation or bundling.
- Framework agnostic — Compatible with React, Vue, Svelte, Angular, HTMX and plain HTML.
- Multiple animation modes — Provides four shimmer styles plus staggered transitions.
- Repeat mode — Generates multiple skeleton rows from a single template using a count attribute.
- Customizable appearance — Adjust color, duration, radius, and reveal timing via attributes.
Use cases
- Display loading placeholders for data tables while fetching rows.
- Show skeleton screens for dashboard widgets during API calls.
- Provide temporary UI while images or videos load on a page.
- Replace form fields with animated placeholders during submission.
phantom-ui vs alternatives
Framer | shadcn/ui | Material UI | |||
|---|---|---|---|---|---|
| Best for | Auto-generated skeleton loaders | Component isolation & docs | Visual website design | Ready UI components | Material Design components |
| Pricing | Paid | Free | Subscription | Free | Free |
| DevHunt upvotes | 5 | 0 | 0 | 0 | 0 |
| Launched | Apr 2026 | — | — | — | — |
- phantom-ui vs Storybook: Storybook focuses on isolated component development and documentation, not auto-generated skeletons.
- phantom-ui vs Framer: Framer is a visual design tool for building sites, not a code-level skeleton loader.
- phantom-ui vs shadcn/ui: shadcn/ui provides ready-made UI components, whereas phantom-ui generates loading placeholders.
- phantom-ui vs Material UI: Material UI offers a full component library with theming, not automatic skeleton generation.
phantom-ui FAQ
Do I need a build step to use phantom-ui?+
No, the component works without any build step.
Can I use phantom-ui with plain HTML?+
Yes, it works with plain HTML as well as major frameworks.
How do I create multiple skeleton rows from one template?+
Use the `count` attribute (and optional `count-gap`) to repeat rows.
What animation options are available?+
Four animation modes are provided, plus staggered transitions and a pulse mode.
Is the component size small enough for production?+
The component is only 8 KB, making it lightweight for production use.
Summarized by DevHunt from aejkatappaja.github.io · Oct 4, 2026. Details may change; check the official site.
Framer
shadcn/ui
Material UI










