Shimmer From Structure

A structure-aware skeleton loader that mirrors your rendered UI at runtime.Zero layout duplication. Built for modern frameworks.

Get Started View Examples GitHub

ReactVueSvelteAngularSolidJS

Why Shimmer From Structure?

Zero Maintenance

Automatically measures your component's structure at runtime. No need to maintain separate skeleton components.

Auto Border-Radius

Detects border-radius from your CSS automatically. Circular avatars get circular shimmer blocks.

Framework Agnostic

Dedicated adapters for React, Vue, Svelte, Angular, and SolidJS with framework-specific APIs.

Tiny Bundle Size

Core package is only 1.44 kB. Framework adapters range from 3.89 kB to 12.84 kB.

Dynamic Data Support

Use templateProps to provide mock data for components that receive dynamic props.

Dark Mode Friendly

Default colors use semi-transparent whites that work on any background.

Quick Example

import { Shimmer } from 'shimmer-from-structure';

function UserCard() {
  return (
    <Shimmer loading={isLoading}>
      <div className="card">
        <img src="avatar.jpg" className="avatar" />
        <h2>John Doe</h2>
        <p>Software Engineer</p>
      </div>
    </Shimmer>
  );
}

That's it! No skeleton components to maintain.