#3 Product of the week · Launched April 28, 2026
phantom-ui

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 comment
  • Frank [maker]· 6mo ago

    Thanks, 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.

An 8kb Web Component that wraps your real markup and measures the actual DOM to generate perfectly-aligned shimmer skeleton blocks. No hand-coded placeholders, no build step, no maintenance when the layout changes. Works with React, Vue, Svelte, Angular, HTMX, or plain HTML. 4 animation modes, stagger transitions, and a count attribute to repeat skeleton rows from a single template.

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
Aejkatappaja/phantom-ui 801 30TypeScriptupdated 3 months ago
works withReactVueSvelteAngularHTMXHTML

Key features

6 features of phantom-ui
  • 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

phantom-uiStorybookFramershadcn/uiMaterial UI
Best forAuto-generated skeleton loadersComponent isolation & docsVisual website designReady UI componentsMaterial Design components
PricingPaidFreeSubscriptionFreeFree
DevHunt upvotes50000
LaunchedApr 2026————

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.