Getting Started

Shimmer From Structure is a structure-aware skeleton loader that automatically mirrors your rendered UI at runtime. No need to maintain separate skeleton components.

Why This Library?

Traditional shimmer libraries require you to:

Manually create skeleton components that mirror your real components
Maintain two versions of each component (real + skeleton)
Update skeletons every time your layout changes

Shimmer From Structure eliminates all of that:

✔ Works with React, Vue, Svelte, Angular & SolidJS
✔ Automatically measures your component's structure at runtime
✔ Generates shimmer effects that match actual dimensions
✔ Zero maintenance - works with any layout changes
✔ Works with complex nested structures
✔ Supports dynamic data with templateProps
✔ Preserves container backgrounds during loading
✔ Auto-detects border-radius from your CSS

Installation

Install the package for your specific framework using your preferred package manager:

npm install @shimmer-from-structure/react
# or
yarn add @shimmer-from-structure/react
# or
pnpm add @shimmer-from-structure/react

npm install @shimmer-from-structure/vue
# or
yarn add @shimmer-from-structure/vue
# or
pnpm add @shimmer-from-structure/vue

npm install @shimmer-from-structure/svelte
# or
yarn add @shimmer-from-structure/svelte
# or
pnpm add @shimmer-from-structure/svelte

npm install @shimmer-from-structure/solid
# or
yarn add @shimmer-from-structure/solid
# or
pnpm add @shimmer-from-structure/solid

npm install @shimmer-from-structure/angular
# or
yarn add @shimmer-from-structure/angular
# or
pnpm add @shimmer-from-structure/angular

Quick Example

Here's a simple example with each framework:

import { Shimmer } from '@shimmer-from-structure/react';

function UserCard() {
  const [loading, setLoading] = useState(true);

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

<script setup>
import { Shimmer } from '@shimmer-from-structure/vue';
const loading = ref(true);
</script>

<template>
  <Shimmer :loading="loading">
    <div class="card">
      <img src="avatar.jpg" class="avatar" />
      <h2>John Doe</h2>
      <p>Software Engineer</p>
    </div>
  </Shimmer>
</template>

<script>
  import { Shimmer } from '@shimmer-from-structure/svelte';
  let loading = true;
</script>

<Shimmer {loading}>
  <div class="card">
    <img src="avatar.jpg" class="avatar" />
    <h2>John Doe</h2>
    <p>Software Engineer</p>
  </div>
</Shimmer>

import { Shimmer } from '@shimmer-from-structure/solid';

function UserCard() {
  const [loading, setLoading] = createSignal(true);

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

@Component({
  standalone: true,
  imports: [ShimmerComponent],
  template: `
    <shimmer [loading]="loading()">
      <div class="card">
        <img src="avatar.jpg" class="avatar" />
        <h2>John Doe</h2>
        <p>Software Engineer</p>
      </div>
    </shimmer>
  `
})
export class UserCard {
  loading = signal(true);
}

That's it! The shimmer effect will automatically match the structure and dimensions of your component.

Next Steps

React Guide - Learn how to use with React
Vue Guide - Learn how to use with Vue
Svelte Guide - Learn how to use with Svelte
Angular Guide - Learn how to use with Angular
SolidJS Guide - Learn how to use with SolidJS
API Reference - Explore all available props and options