# darula-hpp/shimmer-from-structure

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

Repository: https://github.com/darula-hpp/shimmer-from-structure
Canonical: https://ross.abutalabs.com/products/shimmer-from-structure
Homepage: https://shimmer-from-structure-docs.vercel.app
Language: TypeScript
License: MIT
License Family: permissive
Topics: developer-experience, react, shimmer, shimmer-effect, skeleton-loading, vue, vuejs, svelte, sveltejs, angular, angularjs, solidjs, loading-ui
Last push: 2026-05-27T16:23:47+00:00

## Health v2 (maintenance only)
Score: 70/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 84, release rhythm 83, longevity 16
- inputs: {"age_days": 225, "days_push": 98, "days_rel": 119, "gap_med": 1, "n_releases_24m": 28}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1112, forks 19 (observed 2026-08-28T04:03:37.897647+00:00)

## What it is
A structure-aware skeleton loader library that automatically generates shimmer loading states by measuring your rendered UI at runtime, eliminating the need to maintain duplicate skeleton components. It provides dedicated adapters for React, Vue, Svelte, Angular, and SolidJS.

## Use cases
- generate skeleton loading states automatically
- add shimmer effect to components while loading
- avoid maintaining duplicate skeleton components
- show loading placeholders that match real layout
- skeleton loader for react vue svelte angular
- auto-detect border radius for shimmer blocks
- loading state for dynamic data components

## When to choose
- you want skeleton loaders without hand-writing skeleton components
- your layouts change often and skeleton maintenance is a burden
- you use React, Vue, Svelte, Angular, or SolidJS and want a tiny bundle
- you need shimmer states that adapt to responsive layouts and dynamic content

## When to avoid
- you need fully custom-designed skeleton screens with specific placeholder shapes
- your app doesn't use one of the supported frameworks
- you prefer static skeleton markup for maximum control or SSR-first rendering
- runtime DOM measurement overhead is unacceptable for your performance budget

## Facets
- artifact type: library
- maturity: active
- function: ui-components, frontend-framework, animation
- domain: frontend, web-development, developer-tools
- platform: browser, cross-platform
- tags: skeleton-loading, shimmer-effect, loading-placeholder, react, vue, svelte, angular, solidjs, typescript, developer-experience, nodejs

## Member repositories
- darula-hpp/shimmer-from-structure (main) score 70

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:03:37.897647+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:42:42.773456+00:00, confidence not recorded.
  - readme: https://github.com/darula-hpp/shimmer-from-structure (fetched 2026-08-28T04:03:37.897647+00:00, sha 45ac0eb2d9b1)
  - homepage: https://shimmer-from-structure-docs.vercel.app (fetched 2026-08-29T12:46:22.640580+00:00, sha 08fe8adbb3cd)
  - registry_npm: https://registry.npmjs.org/shimmer-from-structure (fetched 2026-08-29T12:46:22.650083+00:00, sha d08e5d70d5c1)
- Data as of 2026-08-30T08:39:29.467469+00:00.