{"_id":"shimmer-from-structure","_rev":"25-e3835ccf50be7f2d65b886b91173893f","name":"shimmer-from-structure","dist-tags":{"latest":"2.4.7"},"versions":{"0.1.0":{"name":"shimmer-from-structure","version":"0.1.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":"","license":"MIT","_id":"shimmer-from-structure@0.1.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"c4da0a496619dfbcca20524c526cb12d5d6d9966","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.1.0.tgz","fileCount":8,"integrity":"sha512-Ru2hkWwxndm3M9qLes0vndVUxkzdXNK+emx3hUCoirx8QXx0u4dwCXNMD8QLVPuJq1NoDotBGK1dCZsequv3uA==","signatures":[{"sig":"MEQCIC/w7lAWD9F/JlYxwaXwKZLbef3ptkKhnwdnXwMoFvgBAiBMpmqFrf04d5XTziQUZHjd0RJCtzj63Hi63r7DUo3VUA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52592},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"4ba3b31897b1999b6bfa28b1d4756e09a8a543a1","scripts":{"dev":"vite","test":"vitest","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.4.0","react":"^18.2.0","vitest":"^4.0.17","recharts":"^3.6.0","react-dom":"^18.2.0","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","@types/react":"^18.2.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.1.0_1768937466356_0.7266573044455591","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"shimmer-from-structure","version":"0.2.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.2.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"11adb408e73960460d7f24f07e477aa68f47fdd8","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.2.0.tgz","fileCount":8,"integrity":"sha512-+P4LILI5gBT8lb9f6M8MjmYWGt+bE2HTyoKWN/L9Doc/kCOniOnKn2PtIJNKAZl9UgupQQ49ltkW0DP9pQZbog==","signatures":[{"sig":"MEUCIE1cIP9DjcOGHQw5t3C8eoxnhcXFsBBuZnSsM7QuFxxQAiEA+kW1KjoKtN6gwSJHvLx2wMearnIPBn9nhiYwYoJXE/8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33589},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"5fa889d6e2172ecb87f64b8230840340219274cb","scripts":{"dev":"vite","test":"vitest","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.4.0","react":"^19.2.3","vitest":"^4.0.17","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.2.0_1768938243614_0.6293791133156617","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"shimmer-from-structure","version":"0.3.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.3.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"c2465ff2396c34f4a2a3013f84a96ad57ed7ea9c","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.3.0.tgz","fileCount":8,"integrity":"sha512-Bv0fjFwbrQm9PEkEQA15RRdr16U8pzBlcmzpI7RMv7qxNG1cPvocygR0j3wfJxAwuenPt66hmfE+TK2CK0NwBg==","signatures":[{"sig":"MEYCIQDIoEZHdBOVEgTFItQEueDmhJwhAdjuaxA/yVArJRiyjgIhAP8xBAHrSuxZFXGSjb25/ooNrUJ+H+jwvfnrtBP0pGUB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33705},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"e630a5af04e576d5ccad8f9553451481f680f963","scripts":{"dev":"vite","test":"vitest","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.4.0","react":"^19.2.3","vitest":"^4.0.17","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.3.0_1768950361184_0.5864609218515111","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"shimmer-from-structure","version":"0.4.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.4.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"4b048133063f4774d32c2763e2cbee48bf09167c","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.4.0.tgz","fileCount":8,"integrity":"sha512-4v1XRnBMjUivWrl0M6XO8Out70YJyh3d+2AGfPzuYtU0IDLs8Vo2FpcVn+Ak6PKK8qN+5Vp2l/1BmWh3gjXF+A==","signatures":[{"sig":"MEQCIHW3IKw9jpRQq/Urp/9HiPcummG8DYXgamnmobtMPIhLAiARaZOBLsoM774ybuhHtY6jsU1g5ykT89q+aNJxpEAy/w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33705},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"3da1aa55f6467f5d5657baed9994c644dc8e7f6d","scripts":{"dev":"vite","test":"vitest","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.4.0","react":"^19.2.3","vitest":"^4.0.17","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.4.0_1769058538435_0.019440937661159063","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"shimmer-from-structure","version":"0.5.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.5.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"b2b6316cff319804e7b346b8fb3ed6f5dea33a51","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.5.0.tgz","fileCount":9,"integrity":"sha512-3Aoyp9TRrv4xv1SVSHXlwgcmV9YtIZqVREnWAXMEbl2YMt4bNIAXeEKKs1B2Wl2YxOIfhvZYjefAY3aenrjzmw==","signatures":[{"sig":"MEYCIQDLWmRS+mywLMq4YDB2dBPQuNuHXrBka6JojQCNOGTVIQIhAJ0G6txaFUZWRUW6Hg2a9ohFtJyDA4mu1nlMAvy5bF6+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39728},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"cbc8c6e76dfe6d63553dc04bff58b8693a10718d","scripts":{"dev":"vite","test":"vitest","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.4.0","react":"^19.2.3","vitest":"^4.0.17","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.5.0_1769267820644_0.3583820805750988","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"shimmer-from-structure","version":"0.6.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.6.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"a54cf56df5b40f6a596178d2836b990576b8739a","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.6.0.tgz","fileCount":9,"integrity":"sha512-08uzIVAen4kENflTBUZ6lmWukclzfOSePvu3CZJ2OBpGv2eM/0MFjFZ3jh+JG4cyR5ZvDYE6wrzKPHjKhADPEg==","signatures":[{"sig":"MEUCIDrS11HSuFb5stvKfuqhRiq3dJzm08mos5AN4Z325iBKAiEAgcLqYN1Mv75hZ4XZit0/yONWS2FgOBe3qILRaPNEs5Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41563},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"59f29149b1c90b39d0229dce965a38ca12ffafdf","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepare":"husky","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"lint-staged":{"*.{ts,tsx}":["eslint --fix","prettier --write"],"*.{json,css,md}":["prettier --write"]},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","husky":"^9.1.7","jsdom":"^27.4.0","react":"^19.2.3","eslint":"^9.39.2","vitest":"^4.0.17","globals":"^17.1.0","prettier":"^3.8.1","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","lint-staged":"^16.2.7","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","typescript-eslint":"^8.53.1","eslint-plugin-react":"^7.37.5","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^8.53.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.26","@typescript-eslint/eslint-plugin":"^8.53.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.6.0_1769286795325_0.10017576369178771","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"shimmer-from-structure","version":"0.7.0","keywords":["react","shimmer","skeleton","loading","placeholder","runtime"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@0.7.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"5ce9e4ecb9c92502e095c157cee4ddc026f84d59","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-0.7.0.tgz","fileCount":10,"integrity":"sha512-Da9MZhQXTx51ZUm9ithfeiT+0Ig+m7MTwbhZzb8x5syTcdbOlGYFYkO+uhogTAub7O0enoy91kFf3qyaL6xbvg==","signatures":[{"sig":"MEUCIDvo0ytgAUV1ZijintDp3pL3t6uoLUwPEeSqHaI2iOuFAiEArP0BApGCnWx+P109RjocFY6TGhAk7Gzjyc8EVf/Gg3k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41977},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"f0a8e4dd4e48d785c54e0f08d1c9eef46278e70a","scripts":{"dev":"vite","lint":"eslint .","test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepare":"husky","preview":"vite preview"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git"},"_npmVersion":"10.8.2","description":"A React shimmer/skeleton library that automatically adapts to your component's runtime structure","directories":{},"lint-staged":{"*.{ts,tsx}":["eslint --fix","prettier --write"],"*.{json,css,md}":["prettier --write"]},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","husky":"^9.1.7","jsdom":"^27.4.0","react":"^19.2.3","eslint":"^9.39.2","vitest":"^4.0.17","globals":"^17.1.0","prettier":"^3.8.1","recharts":"^3.6.0","react-dom":"^19.2.3","@vitest/ui":"^4.0.17","typescript":"^5.3.0","@types/node":"^25.0.9","lint-staged":"^16.2.7","@types/react":"^19.2.9","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","typescript-eslint":"^8.53.1","eslint-plugin-react":"^7.37.5","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^8.53.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.26","@typescript-eslint/eslint-plugin":"^8.53.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_0.7.0_1769292231177_0.8751953515171385","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"shimmer-from-structure","version":"1.0.0","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"3749556cb1ba4fa31d97f178746844f62c819fd2","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.0.tgz","fileCount":4,"integrity":"sha512-LnoG+3MdXiP9SVWUXl9+53zbXsUbXSKx1rSAroL8ZMopuY2PXYsULkzdmfKg/xHsJuqaPaMsNF//BrRH4sGCsA==","signatures":[{"sig":"MEYCIQCH5VuD/xeKHNuJitG8U3GSsaXq1YzQPFhofXhOvKu8EwIhAJCJIAdxxNY96/tGXwzfhRSR/L4fxl/FHV/g1AkJa+fG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1227},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"87d55145e05f33b7325091ab0129fe4f1f2433da","scripts":{"build":"tsc"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"React shimmer library that automatically adapts to your component's runtime structure","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.0_1769334753942_0.44358001476685294","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"shimmer-from-structure","version":"1.0.1","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"9a36f4427ba23d6a12a670cd5ba7845339595f28","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.1.tgz","fileCount":5,"integrity":"sha512-Hqe0JimBhaSYySf2g7HcHET3/2L66oMup+eWCqEojPvsL8EQbH4B9SNIzD/Pcg2P2FJ0/PgdmPRmJlkVkz/IdQ==","signatures":[{"sig":"MEUCIQDEuT9RDbaMGSMo4SJgzIcLhMMF8NXU41qUklhcalYhuQIgXi/WmQTnTJpD3xVM8qMciCMCk8n9jAR2pxKhjWZFu7s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15221},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"c322d5a5e1f997853e3797030eae848086580824","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React and Vue. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.1_1769337233235_0.9186772508667469","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"shimmer-from-structure","version":"1.0.2","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"de9321fd4575fbab9d9a2949d3f4d2fee62b726b","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.2.tgz","fileCount":5,"integrity":"sha512-DbcVjRfRAKExoxZ/HpksS9qJ/LX3Q1Eo7W/yOehzOW/c58G5DdFL+nWvfg6R17WhNc7KTO4gL0tFb40RLoiGPQ==","signatures":[{"sig":"MEYCIQD468B6a6kIGop3fRmTnlwMtwaZry6hBXjG9J3qbpJx9wIhAMu4ytwXHidHPl+zBrwmSnOPLuHAltehkNq3QH61uk7t","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15358},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"c5b697d42f6221afbd81d8d0900256d654e5cb8b","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React and Vue. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.2_1769337913351_0.24939103325264234","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"shimmer-from-structure","version":"1.0.3","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.3","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"c7c19a4c3baea09c5499a567ba019f3d949f6dd8","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.3.tgz","fileCount":5,"integrity":"sha512-rY6WSzIN4JBjwq+xYYg8rGNV/DOLY4nHdpqluTcnhNIm3jxQSxZvR62/p4OzoWp1K9aMbq1c28XkDx2jNC9SmA==","signatures":[{"sig":"MEQCIC1PywiMeGSawL4YJJwyrJpXxHCLv0aZoTio6qK3lYbUAiAbMDSEHI45RcMtjD69jcTfv2vze4+XRQawF2joSnZ1jg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17156},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"255cbfd78069eb2cc2aa34cee047b48d4032d81b","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React and Vue. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.3_1769339925038_0.7860964464235767","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"shimmer-from-structure","version":"1.0.4","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.4","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"7be2cc376a740f85574782ba727e92c6b2287f1e","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.4.tgz","fileCount":5,"integrity":"sha512-Eao4g2TMNDY8ybad8v2O2Rcf97Is7nZdM64HW1tVtMeTOj7ckQJ3l2wujEKHHGAx5IDe8wYsL0VuoZwB7mGnaQ==","signatures":[{"sig":"MEUCIGHImKaoVLgACCHUg5OW6wWf3kkxKv9amZ3qtza9d8aPAiEAkqcxej6OtaTvU/NMsCE44VAklsbxTOrmPOEx7wEPSno=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17324},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"b4062a0558531618b111b70ccb211763ba97c828","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React and Vue. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.4_1769340584255_0.8733416509583587","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"shimmer-from-structure","version":"1.0.5","keywords":["react","vue","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.0.5","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"b49a1593de5d72fff1c3274e1173969cf4937e5f","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.0.5.tgz","fileCount":5,"integrity":"sha512-sCOdsunZEbEG2OIewxMUum7i/MZd2t2tciAm5IVXm6ZPtCTEKOdFUeTYUIBbNQOgybcq3eiK3MehFwowZ/Rhpg==","signatures":[{"sig":"MEQCIBcucsLvQ3qHCND3RHIvcLIWZYAVC6Z3yain6QeRB3PDAiBt4gj/Guoi+IpsOzNbxzn2ZPmd86WECw1GqOMcqoT1SQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17384},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue"},"gitHead":"b5e6777e77241f1b420c1e15c48b778b820a4fc8","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React and Vue. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.0.5_1769342814486_0.3870981934327351","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"shimmer-from-structure","version":"1.1.0","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@1.1.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"367d8b3fe20459a3fc1cb537c09b56617433cae1","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-1.1.0.tgz","fileCount":5,"integrity":"sha512-+cLdKKr9NkG0X7jX4aTpZEXAsNOnE61NhNsJfyNTwM5wpXTu8AfjdPF2H7nz3Txy+28GiZKX5SPHUIW4Ph5AWQ==","signatures":[{"sig":"MEYCIQDH4GNYYtJzyhpTgJk5QIb2mD/f3ZJ6RIQc/XdYv2u1NQIhAMTOnsBM3HHT4vA2j/jK2ErovkSCSNMnco5QWob/7/xO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20641},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./svelte":"@shimmer-from-structure/svelte"},"gitHead":"fce683fa234628693356d2823ecdfb72b31f409e","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/svelte":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_1.1.0_1769489658985_0.48762118400337817","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"shimmer-from-structure","version":"2.0.0","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.0.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"094cf6431fe179309e10c42a8cbed65714608a01","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.0.0.tgz","fileCount":5,"integrity":"sha512-TGRWwBihyeI1+8o+3sNmbr4mEb5MIN6USNh0ESDgbEaml56kVvxeTHj+exLrczZSGugb4ZyQArTCCvHU9rKH+A==","signatures":[{"sig":"MEUCIQCuqK1aIAYpCc52FGW1toyLU7PaKjOJMgkvfKrczH4/CQIgU3Hmqo8YEdzAWw9TmjIwvtDdiopbQSOPOYDbgSd4EZI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20778},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./svelte":"@shimmer-from-structure/svelte"},"gitHead":"1ce8213c8d1522cf163605e307ce03bff87ff2c7","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/svelte":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.0.0_1769639508348_0.7937358710655786","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"shimmer-from-structure","version":"2.2.0","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.2.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"56be9d23ede68f8e69c0bc1ebf2333e40ceb1cda","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.2.0.tgz","fileCount":5,"integrity":"sha512-GgSYniiVZf0H9QqNWoONUkvKqk7juRtxvoXB3Nzo1vvnMVrW3AJnnBYOTyJDBKxwuIfJMOePHmFi+7lTsjHy2w==","signatures":[{"sig":"MEUCIFYii+Pz9J3DD/kWmtBbYo9VlhN3jjCpQRArPlaCRQ2rAiEApdDlGc32OC1qUpsheaAu69ZcpeTIFIRwVBDjqYIi+M0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20778},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./svelte":"@shimmer-from-structure/svelte"},"gitHead":"4e90f03ff11b0ee1afbd5582e4e8aa21690d3e46","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/svelte":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.2.0_1770248797031_0.7529356391619877","host":"s3://npm-registry-packages-npm-production"}},"2.3.0":{"name":"shimmer-from-structure","version":"2.3.0","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.3.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"d28668b715da743f8d9a60d8564555537c68bd91","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.3.0.tgz","fileCount":5,"integrity":"sha512-L+7bTWxsJdI+TW+IKkMJ+sJIsmGOLzVVYvaOkGL+RqgriMt5nzaMxw/WjSGpQGF7t6jC7O1HXPmH2kuQFzOZSA==","signatures":[{"sig":"MEYCIQDrOx+Y+0ZKw6QP2vmxLeWalAn5sWIpD7lRWmV+azAZQQIhAL9/l4bnlpf0Antr7IO/8+MEH/LEl9ToI8IsqYPRcw58","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27506},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./svelte":"@shimmer-from-structure/svelte"},"gitHead":"dabae59fe57d2346dc1ad00bbc163d7259845056","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/svelte":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.3.0_1770576217584_0.32607061119197867","host":"s3://npm-registry-packages-npm-production"}},"2.3.1":{"name":"shimmer-from-structure","version":"2.3.1","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.3.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"87ee125bc03815a819abd01a7376a10294f2b2a8","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.3.1.tgz","fileCount":5,"integrity":"sha512-WVeH+NjhWqMoarXGMpgY1DOxd5jXCVE1uomo/DkzMhHUWkIPQHfE9/VXwJ5ZSva8vYpGKqZzDdZuMJWUHctbQg==","signatures":[{"sig":"MEQCIHimyEQWeZO8NIJJf3XznYbyVD2AQOemmRKr4RoVmhfBAiBYbh3GICqPxV3AJSWSGpnnWAVrVHkShm5Wu6Oks87R4g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27692},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"1d27b633ccd1dd2ac336c66738e6af540309e5de","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/solid":"*","@shimmer-from-structure/svelte":"*","@shimmer-from-structure/angular":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.3.1_1770751125215_0.057704723273172664","host":"s3://npm-registry-packages-npm-production"}},"2.3.2":{"name":"shimmer-from-structure","version":"2.3.2","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.3.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"c4ff3d7bcd40b815a4c4d8ba12c2a6de53aebd97","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.3.2.tgz","fileCount":5,"integrity":"sha512-6ho8yezoFbmsVs3321ywoEcPv6KHP1Cr0+X8vqgsRFeLI1xGVmlvnpkydw0QIOAqzpxE9fP0axpQpsgr2ejABg==","signatures":[{"sig":"MEUCIQD5hqPHwAYb+TZ0ofBNbyWWqBBskSty0nFLQ0dZyqYP/QIgBn/eEi3DD99Ss6JAWibnJAKmQf876O/jllWIa0jt6pM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27634},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"059953641b0590552a7c22e775c68cea45d4a51c","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/solid":"*","@shimmer-from-structure/svelte":"*","@shimmer-from-structure/angular":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.3.2_1771663403533_0.8334961346587011","host":"s3://npm-registry-packages-npm-production"}},"2.4.1":{"name":"shimmer-from-structure","version":"2.4.1","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.4.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"4994181c64d8f1db3f8378f54f3379235f890ded","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.4.1.tgz","fileCount":5,"integrity":"sha512-G6EUpa1dYRl4w8+3jko01JdXUqgw3H7HK4bL+mJL/j9sFtaqjVxfMrX6Tf0jwUWLkXUyyIl18G1basdlv8Kjew==","signatures":[{"sig":"MEYCIQCaQ3laquQCwXg/YjWwXsxNAkdBeiqu4m55Azq4zDwG/QIhAIttW1O414LhnH9WiU+UJvpGS109s8iChWp3gNgmDGlR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27634},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"12e24c69d9cea116a6afdd173caf14ab1fdb445e","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/solid":"*","@shimmer-from-structure/svelte":"*","@shimmer-from-structure/angular":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.4.1_1773652226145_0.6241107430232578","host":"s3://npm-registry-packages-npm-production"}},"2.4.2":{"name":"shimmer-from-structure","version":"2.4.2","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.4.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"9638d789b34eaeee0af4efcfbb5fcb47c9ebbabd","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.4.2.tgz","fileCount":5,"integrity":"sha512-dzVI16FWQbA5lgk+YS+yJAbDKYsVV978TFXY95X37B/BDBMUW1MLW156PMEj8S3DPbZZGSJakPBOqvBQmmXFSg==","signatures":[{"sig":"MEQCICF9C9wi1YiFeyAoFt5Mvz98KuhJTXlRX5c78XMKlJ+ZAiBXKkxcC6sJA5AAPmeg7YpXhMB2hZjzVlV31CxHI83oTQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27634},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"9feb8f602c9ff2463fe7af262c88faa02a840620","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@shimmer-from-structure/vue":"*","@shimmer-from-structure/react":"*","@shimmer-from-structure/solid":"*","@shimmer-from-structure/svelte":"*","@shimmer-from-structure/angular":"*"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.4.2_1774089472886_0.40664006138689235","host":"s3://npm-registry-packages-npm-production"}},"2.5.0":{"name":"shimmer-from-structure","version":"2.5.0","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.5.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"418e2ab02670e836393e56b9c55d3a38b791f67d","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.5.0.tgz","fileCount":6,"integrity":"sha512-wZttxq8zRPbFTQDY/2LN9jGwVUNgGNqRJhFQXRX+FfDNQu3JXMbYCZ85iuySkpYWcN8kcCIQOpsbTjPm5JqxIw==","signatures":[{"sig":"MEQCIB4QGkCtVGYAZoYVwuGgE2chPxvjJUS2FuhuuaykeWpjAiBo9HS4b6ATT8G7jdTVp/Fpa5J+IEBoi9ThKnJjtSlcGw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28326},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"1d2ec20b9f8296b99ae117838fef6f50fb83b7a4","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.9.7","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"@shimmer-from-structure/vue":"2.4.5","@shimmer-from-structure/react":"2.4.5","@shimmer-from-structure/solid":"2.4.5","@shimmer-from-structure/svelte":"2.4.5","@shimmer-from-structure/angular":"2.4.5"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.5.0_1775924734756_0.16317619187913768","host":"s3://npm-registry-packages-npm-production"}},"2.4.6":{"name":"shimmer-from-structure","version":"2.4.6","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.4.6","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"97a1a53bec62c35c7e45650ea0a59efeab08a717","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.4.6.tgz","fileCount":6,"integrity":"sha512-xq2kY8ll77AbKdZXAI3/KEHoBgZpDCiWgjISFRUr+Pd1iA69udyf/9XGajsY8k/vzk1fTKh1YzbY+CXcEwVDyg==","signatures":[{"sig":"MEUCIQDwzj/Zk0uMzjreD0qns3ilmJIoZGBLgfK+vsVwAmvLxQIgEYDx1XFZj6tTd2ffAK4e1IPclVcErQ5+CTUkgdxt0aU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28379},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"64cda5378c304ecf497d58db2f399d3df4968207","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.8.2","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@shimmer-from-structure/vue":"2.4.6","@shimmer-from-structure/react":"2.4.6","@shimmer-from-structure/solid":"2.4.6","@shimmer-from-structure/svelte":"2.4.6","@shimmer-from-structure/angular":"2.4.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.4.6_1778069280282_0.2596399617547043","host":"s3://npm-registry-packages-npm-production"}},"2.4.5":{"name":"shimmer-from-structure","version":"2.4.5","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.4.5","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"cc2cabf205d3a77f5c7cdedac065d2c9812e5459","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.4.5.tgz","fileCount":6,"integrity":"sha512-xfHDH2spxIvh7cSptspvos7lgQiCX+Gt3bP8At57m9Ft0JQqQf/0w8Gaa2ahA4v7EMkM6wB3N0GMPZF0PG5Avg==","signatures":[{"sig":"MEQCIE5NXfKIFq1LNpuvUXXQHADowMIQrvlLHaSmtpEEdtkgAiBB189QYhQ8fdXhOCsiWLYMHHytCrVJQ/8Vq1PiNCj3mw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28379},"main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./solid":"@shimmer-from-structure/solid","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular"},"gitHead":"4b8761c8b8938bfb50b7f42f638a601f60d73a07","scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/shimmer-from-structure"},"_npmVersion":"10.9.7","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"@shimmer-from-structure/vue":"2.4.5","@shimmer-from-structure/react":"2.4.5","@shimmer-from-structure/solid":"2.4.5","@shimmer-from-structure/svelte":"2.4.5","@shimmer-from-structure/angular":"2.4.5"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/shimmer-from-structure_2.4.5_1778069506249_0.22008672377372296","host":"s3://npm-registry-packages-npm-production"}},"2.4.7":{"name":"shimmer-from-structure","version":"2.4.7","description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","main":"index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./vue":"@shimmer-from-structure/vue","./svelte":"@shimmer-from-structure/svelte","./angular":"@shimmer-from-structure/angular","./solid":"@shimmer-from-structure/solid"},"scripts":{"build":"tsc","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"dependencies":{"@shimmer-from-structure/react":"2.4.6","@shimmer-from-structure/vue":"2.4.6","@shimmer-from-structure/svelte":"2.4.6","@shimmer-from-structure/angular":"2.4.6","@shimmer-from-structure/solid":"2.4.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"keywords":["react","vue","svelte","shimmer","skeleton","loading"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/shimmer-from-structure"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"shimmer-from-structure@2.4.7","gitHead":"64cda5378c304ecf497d58db2f399d3df4968207","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-USMttd6k7cNJSAwdHE1tuXh1ASEchK7esx9mAN9TnjzUeoA81UIAh5hU9SnhdQLk69FIm6Q57DilRpvL9NZ8NQ==","shasum":"db55eadfeae4564ab5d05771c0557e1f2badfb58","tarball":"https://registry.npmjs.org/shimmer-from-structure/-/shimmer-from-structure-2.4.7.tgz","fileCount":6,"unpackedSize":28379,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCn25V+wdGitF6fEvQh65WlgnRDdgw65GPqweRcVzTA6gIhAO6n4yJ1mIiV5zJlppdJtU4qPGSLPSpSz/wt1ykRFePE"}]},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"directories":{},"maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shimmer-from-structure_2.4.7_1778069777245_0.9797490899966681"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-20T19:31:06.355Z","modified":"2026-05-06T12:16:17.516Z","0.1.0":"2026-01-20T19:31:06.533Z","0.2.0":"2026-01-20T19:44:03.747Z","0.3.0":"2026-01-20T23:06:01.400Z","0.4.0":"2026-01-22T05:08:58.586Z","0.5.0":"2026-01-24T15:17:00.865Z","0.6.0":"2026-01-24T20:33:15.474Z","0.7.0":"2026-01-24T22:03:51.338Z","1.0.0":"2026-01-25T09:52:34.108Z","1.0.1":"2026-01-25T10:33:53.381Z","1.0.2":"2026-01-25T10:45:13.474Z","1.0.3":"2026-01-25T11:18:45.175Z","1.0.4":"2026-01-25T11:29:44.432Z","1.0.5":"2026-01-25T12:06:54.647Z","1.1.0":"2026-01-27T04:54:19.130Z","2.0.0":"2026-01-28T22:31:48.515Z","2.2.0":"2026-02-04T23:46:37.243Z","2.3.0":"2026-02-08T18:43:37.732Z","2.3.1":"2026-02-10T19:18:45.372Z","2.3.2":"2026-02-21T08:43:23.694Z","2.4.1":"2026-03-16T09:10:26.290Z","2.4.2":"2026-03-21T10:37:53.065Z","2.5.0":"2026-04-11T16:25:34.918Z","2.4.6":"2026-05-06T12:08:00.423Z","2.4.5":"2026-05-06T12:11:46.376Z","2.4.7":"2026-05-06T12:16:17.392Z"},"bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","keywords":["react","vue","svelte","shimmer","skeleton","loading"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/shimmer-from-structure"},"description":"Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"readme":"# Shimmer From Structure\n\nA structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS.\n\n**Documentation:** <a href=\"https://shimmer-from-structure-docs.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">Access Full Docs</a>\n\n![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\n![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)\n![Svelte](https://img.shields.io/badge/Svelte-ff3e00?style=for-the-badge&logo=svelte&logoColor=white)\n![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)\n![SolidJS](https://img.shields.io/badge/SolidJS-%232c4f7c?style=for-the-badge&logo=solid&logoColor=white)\n\n![Shimmer From Structure Demo](https://github.com/darula-hpp/shimmer-from-structure/raw/main/example/preview.gif)\n\n## Why This Library?\n\nTraditional shimmer libraries require you to:\n\n- Manually create skeleton components that mirror your real components\n- Maintain two versions of each component (real + skeleton)\n- Update skeletons every time your layout changes\n\n**Shimmer From Structure** eliminates all of that:\n\n- ✅ **Works with React, Vue, Svelte, Angular & SolidJS** - Simple, framework-specific adapters\n- ✅ Automatically measures your component's structure at runtime\n- ✅ Generates shimmer effects that match actual dimensions\n- ✅ Zero maintenance - works with any layout changes\n- ✅ Works with complex nested structures\n- ✅ Supports dynamic data with `templateProps`\n- ✅ Preserves container backgrounds during loading\n- ✅ Auto-detects border-radius from your CSS\n\n## Installation\n\n```bash\nnpm install shimmer-from-structure\n# or\nyarn add shimmer-from-structure\n# or\npnpm add shimmer-from-structure\n```\n\n## 🎯 Framework Support\n\nShimmer From Structure provides dedicated packages for **React and Vue**.\n\n### React\n\nReact support is built into the main package for backward compatibility:\n\n```javascript\n// React projects (or @shimmer-from-structure/react)\nimport { Shimmer } from 'shimmer-from-structure';\n```\n\n### Vue 3\n\nVue support requires importing from the specific adapter:\n\n```javascript\n// Vue 3 projects\nimport { Shimmer } from '@shimmer-from-structure/vue';\n```\n\n### Svelte\n\nSvelte support is provided via its own adapter:\n\n```javascript\n// Svelte projects\nimport { Shimmer } from '@shimmer-from-structure/svelte';\n```\n\n### Angular\n\nAngular support requires importing from the specific adapter:\n\n```typescript\n// Angular projects\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\n```\n\n### SolidJS\n\nSolidJS support requires importing from the specific adapter:\n\n```tsx\n// SolidJS projects\nimport { Shimmer } from '@shimmer-from-structure/solid';\n```\n\n---\n\n# 📖 Basic Usage\n\n## React\n\n### Static Content\n\nFor components with hardcoded/static content:\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\nfunction UserCard() {\n  return (\n    <Shimmer loading={isLoading}>\n      <div className=\"card\">\n        <img src=\"avatar.jpg\" className=\"avatar\" />\n        <h2>John Doe</h2>\n        <p>Software Engineer</p>\n      </div>\n    </Shimmer>\n  );\n}\n```\n\n## Vue\n\n### Static Content\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { Shimmer } from '@shimmer-from-structure/vue';\n\nconst isLoading = ref(true);\n</script>\n\n<template>\n  <Shimmer :loading=\"isLoading\">\n    <div class=\"card\">\n      <img src=\"avatar.jpg\" class=\"avatar\" />\n      <h2>John Doe</h2>\n      <p>Software Engineer</p>\n    </div>\n  </Shimmer>\n</template>\n```\n\n## Svelte\n\n### Static Content\n\n```svelte\n<script>\nimport { Shimmer } from '@shimmer-from-structure/svelte';\n\nlet isLoading = $state(true);\n</script>\n\n<Shimmer loading={isLoading}>\n  <div class=\"card\">\n    <img src=\"avatar.jpg\" class=\"avatar\" />\n    <h2>John Doe</h2>\n    <p>Software Engineer</p>\n  </div>\n</Shimmer>\n```\n\n## Angular\n\n### Static Content\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\n\n@Component({\n  selector: 'app-user-card',\n  standalone: true,\n  imports: [ShimmerComponent],\n  template: `\n    <shimmer [loading]=\"isLoading()\">\n      <div class=\"card\">\n        <img src=\"avatar.jpg\" class=\"avatar\" />\n        <h2>John Doe</h2>\n        <p>Software Engineer</p>\n      </div>\n    </shimmer>\n  `,\n})\nexport class UserCardComponent {\n  isLoading = signal(true);\n}\n```\n\n## SolidJS\n\n### Static Content\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport { Shimmer } from '@shimmer-from-structure/solid';\n\nfunction UserCard() {\n  const [isLoading, setIsLoading] = createSignal(true);\n\n  return (\n    <Shimmer loading={isLoading()}>\n      <div class=\"card\">\n        <img src=\"avatar.jpg\" class=\"avatar\" />\n        <h2>John Doe</h2>\n        <p>Software Engineer</p>\n      </div>\n    </Shimmer>\n  );\n}\n```\n\n---\n\n### Dynamic Content with `templateProps`\n\nFor components that receive dynamic data via props, use `templateProps` to provide mock data for skeleton generation:\n\n**React**\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\n// Your component that accepts props\nconst UserCard = ({ user }) => (\n  <div className=\"card\">\n    <img src={user.avatar} className=\"avatar\" />\n    <h2>{user.name}</h2>\n    <p>{user.role}</p>\n  </div>\n);\n\n// Template data for the skeleton\nconst userTemplate = {\n  name: 'Loading...',\n  role: 'Loading role...',\n  avatar: 'placeholder.jpg',\n};\n\nfunction App() {\n  const [loading, setLoading] = useState(true);\n  const [user, setUser] = useState(null);\n\n  return (\n    <Shimmer loading={loading} templateProps={{ user: userTemplate }}>\n      <UserCard user={user || userTemplate} />\n    </Shimmer>\n  );\n}\n```\n\n**Vue**\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { Shimmer } from '@shimmer-from-structure/vue';\nimport UserCard from './UserCard.vue';\n\nconst loading = ref(true);\nconst userTemplate = {\n  name: 'Loading...',\n  role: 'Loading role...',\n  avatar: 'placeholder.jpg',\n};\n</script>\n\n<template>\n  <Shimmer :loading=\"loading\" :templateProps=\"{ user: userTemplate }\">\n    <UserCard :user=\"user || userTemplate\" />\n  </Shimmer>\n</template>\n```\n\n**Svelte**\n\n```svelte\n<script>\nimport { Shimmer } from '@shimmer-from-structure/svelte';\nimport UserCard from './UserCard.svelte';\n\nlet { user } = $props();\nlet loading = $state(true);\n\nconst userTemplate = {\n  name: 'Loading...',\n  role: 'Loading role...',\n  avatar: 'placeholder.jpg',\n};\n</script>\n\n<Shimmer loading={loading} templateProps={{ user: userTemplate }}>\n  <UserCard user={user || userTemplate} />\n</Shimmer>\n```\n\n**Angular**\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\nimport { UserCardComponent } from './user-card.component';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [ShimmerComponent, UserCardComponent],\n  template: `\n    <shimmer [loading]=\"loading()\" [templateProps]=\"{ user: userTemplate }\">\n      <app-user-card [user]=\"user() || userTemplate\" />\n    </shimmer>\n  `,\n})\nexport class AppComponent {\n  loading = signal(true);\n  user = signal<User | null>(null);\n\n  userTemplate = {\n    name: 'Loading...',\n    role: 'Loading role...',\n    avatar: 'placeholder.jpg',\n  };\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport { Shimmer } from '@shimmer-from-structure/solid';\nimport { UserCard } from './UserCard';\n\nfunction App() {\n  const [loading, setLoading] = createSignal(true);\n  const [user, setUser] = createSignal(null);\n\n  const userTemplate = {\n    name: 'Loading...',\n    role: 'Loading role...',\n    avatar: 'placeholder.jpg',\n  };\n\n  return (\n    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>\n      <UserCard user={user() || userTemplate} />\n    </Shimmer>\n  );\n}\n```\n\nThe `templateProps` object is spread onto the first child component when loading, allowing it to render with mock data for measurement.\n\n## 🎨 API Reference\n\n### `<Shimmer>` Props\n\n| Prop                   | Type                      | Default                    | Description                                               |\n| ---------------------- | ------------------------- | -------------------------- | --------------------------------------------------------- |\n| `loading`              | `boolean`                 | `true`                     | Whether to show shimmer effect or actual content          |\n| `children`             | `React.ReactNode`         | required                   | The content to render/measure                             |\n| `shimmerColor`         | `string`                  | `'rgba(255,255,255,0.15)'` | Color of the shimmer wave                                 |\n| `backgroundColor`      | `string`                  | `'rgba(255,255,255,0.08)'` | Background color of shimmer blocks                        |\n| `duration`             | `number`                  | `1.5`                      | Animation duration in seconds                             |\n| `fallbackBorderRadius` | `number`                  | `4`                        | Border radius (px) for elements with no CSS border-radius |\n| `templateProps`        | `Record<string, unknown>` | -                          | Props to inject into first child for skeleton rendering   |\n\n### Example with All Props\n\n**React**\n\n```tsx\n<Shimmer\n  loading={isLoading}\n  shimmerColor=\"rgba(255, 255, 255, 0.2)\"\n  backgroundColor=\"rgba(255, 255, 255, 0.1)\"\n  duration={2}\n  fallbackBorderRadius={8}\n  templateProps={{\n    user: userTemplate,\n    settings: settingsTemplate,\n  }}\n>\n  <MyComponent user={user} settings={settings} />\n</Shimmer>\n```\n\n**Vue**\n\n```vue\n<Shimmer\n  :loading=\"isLoading\"\n  shimmerColor=\"rgba(255, 255, 255, 0.2)\"\n  backgroundColor=\"rgba(255, 255, 255, 0.1)\"\n  :duration=\"2\"\n  :fallbackBorderRadius=\"8\"\n  :templateProps=\"{\n    user: userTemplate,\n    settings: settingsTemplate,\n  }\"\n>\n  <MyComponent :user=\"user\" :settings=\"settings\" />\n</Shimmer>\n```\n\n**Svelte**\n\n```svelte\n<Shimmer\n  loading={isLoading}\n  shimmerColor=\"rgba(255, 255, 255, 0.2)\"\n  backgroundColor=\"rgba(255, 255, 255, 0.1)\"\n  duration={2}\n  fallbackBorderRadius={8}\n  templateProps={{\n    user: userTemplate,\n    settings: settingsTemplate,\n  }}\n>\n  <MyComponent {user} {settings} />\n</Shimmer>\n```\n\n**Angular**\n\n```typescript\n<shimmer\n  [loading]=\"isLoading()\"\n  shimmerColor=\"rgba(255, 255, 255, 0.2)\"\n  backgroundColor=\"rgba(255, 255, 255, 0.1)\"\n  [duration]=\"2\"\n  [fallbackBorderRadius]=\"8\"\n  [templateProps]=\"{\n    user: userTemplate,\n    settings: settingsTemplate\n  }\">\n  <app-my-component\n    [user]=\"user()\"\n    [settings]=\"settings()\" />\n</shimmer>\n```\n\n**SolidJS**\n\n```tsx\n<Shimmer\n  loading={isLoading()}\n  shimmerColor=\"rgba(255, 255, 255, 0.2)\"\n  backgroundColor=\"rgba(255, 255, 255, 0.1)\"\n  duration={2}\n  fallbackBorderRadius={8}\n  templateProps={{\n    user: userTemplate,\n    settings: settingsTemplate,\n  }}\n>\n  <MyComponent user={user()} settings={settings()} />\n</Shimmer>\n```\n\n## 🔧 How It Works\n\n1. **Visible Container Rendering**: When `loading={true}`, your component renders with transparent text but **visible container backgrounds**\n2. **Template Props Injection**: If `templateProps` is provided, it's spread onto the first child so dynamic components can render\n3. **DOM Measurement**: Uses `useLayoutEffect` to synchronously measure all leaf elements via `getBoundingClientRect()`\n4. **Border Radius Detection**: Automatically captures each element's computed `border-radius` from CSS\n5. **Shimmer Generation**: Creates absolutely-positioned shimmer blocks matching measured dimensions\n6. **Animation**: Applies smooth gradient animation that sweeps across each block\n\n### Key Features\n\n- **Container backgrounds visible**: Unlike `opacity: 0`, we use `color: transparent` so card backgrounds/borders show during loading\n- **Auto border-radius**: Circular avatars get circular shimmer blocks automatically\n- **Fallback radius**: Text elements (which have `border-radius: 0`) use `fallbackBorderRadius` to avoid sharp rectangles\n- **Dark-mode friendly**: Default colors use semi-transparent whites that work on any background\n\n## Examples\n\n### Dashboard with Multiple Sections\n\nEach section can have its own independent loading state:\n\n**React**\n\n```tsx\nfunction Dashboard() {\n  const [loadingUser, setLoadingUser] = useState(true);\n  const [loadingStats, setLoadingStats] = useState(true);\n\n  return (\n    <>\n      {/* User profile section */}\n      <Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>\n        <UserProfile user={user} />\n      </Shimmer>\n\n      {/* Stats section - with custom colors */}\n      <Shimmer\n        loading={loadingStats}\n        templateProps={{ stats: statsTemplate }}\n        shimmerColor=\"rgba(20, 184, 166, 0.2)\"\n      >\n        <StatsGrid stats={stats} />\n      </Shimmer>\n    </>\n  );\n}\n```\n\n**Vue**\n\n```vue\n<template>\n  <!-- User profile section -->\n  <Shimmer :loading=\"loadingUser\" :templateProps=\"{ user: userTemplate }\">\n    <UserProfile :user=\"user\" />\n  </Shimmer>\n\n  <!-- Stats section - with custom colors -->\n  <Shimmer\n    :loading=\"loadingStats\"\n    :templateProps=\"{ stats: statsTemplate }\"\n    shimmerColor=\"rgba(20, 184, 166, 0.2)\"\n  >\n    <StatsGrid :stats=\"stats\" />\n  </Shimmer>\n</template>\n```\n\n**Svelte**\n\n```svelte\n<Shimmer loading={loadingUser} templateProps={{ user: userTemplate }}>\n  <UserProfile {user} />\n</Shimmer>\n\n<Shimmer\n  loading={loadingStats}\n  templateProps={{ stats: statsTemplate }}\n  shimmerColor=\"rgba(20, 184, 166, 0.2)\"\n>\n  <StatsGrid {stats} />\n</Shimmer>\n```\n\n**Angular**\n\n```typescript\n@Component({\n  template: `\n    <!-- User profile section -->\n    <shimmer [loading]=\"loadingUser()\" [templateProps]=\"{ user: userTemplate }\">\n      <app-user-profile [user]=\"user()\" />\n    </shimmer>\n\n    <!-- Stats section - with custom colors -->\n    <shimmer\n      [loading]=\"loadingStats()\"\n      [templateProps]=\"{ stats: statsTemplate }\"\n      shimmerColor=\"rgba(20, 184, 166, 0.2)\"\n    >\n      <app-stats-grid [stats]=\"stats()\" />\n    </shimmer>\n  `,\n})\nexport class DashboardComponent {\n  loadingUser = signal(true);\n  loadingStats = signal(true);\n  // ...\n}\n```\n\n### Transactions List\n\n**React**\n\n```tsx\n<Shimmer loading={loadingTransactions} templateProps={{ transactions: transactionsTemplate }}>\n  <TransactionsList transactions={transactions} />\n</Shimmer>\n```\n\n**Vue**\n\n```vue\n<Shimmer :loading=\"loadingTransactions\" :templateProps=\"{ transactions: transactionsTemplate }\">\n  <TransactionsList :transactions=\"transactions\" />\n</Shimmer>\n```\n\n**Svelte**\n\n```svelte\n<Shimmer loading={loadingTransactions} templateProps={{ transactions: transactionsTemplate }}>\n  <TransactionsList {transactions} />\n</Shimmer>\n```\n\n**Angular**\n\n```typescript\n<shimmer\n  [loading]=\"loadingTransactions()\"\n  [templateProps]=\"{ transactions: transactionsTemplate }\">\n  <app-transactions-list [transactions]=\"transactions()\" />\n</shimmer>\n```\n\n### Team Members Grid\n\n**React**\n\n```tsx\n<Shimmer loading={loadingTeam} templateProps={{ members: teamTemplate }}>\n  <TeamMembers members={team} />\n</Shimmer>\n```\n\n**Vue**\n\n```vue\n<Shimmer :loading=\"loadingTeam\" :templateProps=\"{ members: teamTemplate }\">\n  <TeamMembers :members=\"team\" />\n</Shimmer>\n```\n\n**Svelte**\n\n```svelte\n<Shimmer loading={loadingTeam} templateProps={{ members: teamTemplate }}>\n  <TeamMembers members={team} />\n</Shimmer>\n```\n\n**Angular**\n\n```typescript\n<shimmer\n  [loading]=\"loadingTeam()\"\n  [templateProps]=\"{ members: teamTemplate }\">\n  <app-team-members [members]=\"team()\" />\n</shimmer>\n```\n\n## 🔄 Using with React Suspense\n\nShimmer works seamlessly as a Suspense fallback. When used this way, `loading` is always `true` because React automatically unmounts the fallback and replaces it with the resolved component.\n\n### Basic Suspense Pattern\n\n```tsx\nimport { Suspense, lazy } from 'react';\nimport { Shimmer } from 'shimmer-from-structure';\n\nconst UserProfile = lazy(() => import('./UserProfile'));\n\nfunction App() {\n  return (\n    <Suspense\n      fallback={\n        <Shimmer loading={true} templateProps={{ user: userTemplate }}>\n          <UserProfile />\n        </Shimmer>\n      }\n    >\n      <UserProfile userId=\"123\" />\n    </Suspense>\n  );\n}\n```\n\n### Why `loading={true}` is Always Set\n\nWhen using Shimmer as a Suspense fallback:\n\n1. **Suspend**: React renders the fallback → Shimmer shows with `loading={true}`\n2. **Resolve**: React **replaces** the entire fallback with the real component\n3. The Shimmer is **unmounted**, not updated — so you never need to toggle `loading`\n\n### Performance Tips for Suspense\n\n**Memoize the fallback** to prevent re-renders:\n\n```tsx\nconst ShimmerFallback = React.memo(() => (\n  <Shimmer loading={true} templateProps={{ user: userTemplate }}>\n    <UserProfile />\n  </Shimmer>\n));\n\n// Usage\n<Suspense fallback={<ShimmerFallback />}>\n  <UserProfile userId=\"123\" />\n</Suspense>;\n```\n\n**Keep templates lightweight** — the DOM is measured synchronously via `useLayoutEffect`, so avoid complex logic in your template.\n\n## Global Configuration\n\nYou can set default configuration for your entire app (or specific sections) using the context/provider pattern. This is perfect for maintaining consistent themes without repeating props.\n\n### React (Context API)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';\n\nfunction App() {\n  return (\n    // Set global defaults\n    <ShimmerProvider\n      config={{\n        shimmerColor: 'rgba(56, 189, 248, 0.4)', // Blue shimmer\n        backgroundColor: 'rgba(56, 189, 248, 0.1)', // Blue background\n        duration: 2.5,\n        fallbackBorderRadius: 8,\n      }}\n    >\n      <Dashboard />\n    </ShimmerProvider>\n  );\n}\n```\n\n### Vue (Provide/Inject)\n\n```vue\n<!-- App.vue -->\n<script setup>\nimport { provideShimmerConfig } from '@shimmer-from-structure/vue';\n\nprovideShimmerConfig({\n  shimmerColor: 'rgba(56, 189, 248, 0.4)',\n  backgroundColor: 'rgba(56, 189, 248, 0.1)',\n  duration: 2.5,\n  fallbackBorderRadius: 8,\n});\n</script>\n\n<template>\n  <router-view />\n</template>\n```\n\n### Svelte (setShimmerConfig)\n\n```svelte\n<!-- App.svelte or any parent component -->\n<script>\nimport { setShimmerConfig } from '@shimmer-from-structure/svelte';\nimport Dashboard from './Dashboard.svelte';\n\n// Must be called at the top level during component initialization\nsetShimmerConfig({\n  shimmerColor: 'rgba(56, 189, 248, 0.4)',\n  backgroundColor: 'rgba(56, 189, 248, 0.1)',\n  duration: 2.5,\n  fallbackBorderRadius: 8,\n});\n</script>\n\n<Dashboard />\n```\n\n### Angular (Dependency Injection)\n\n```typescript\n// main.ts or bootstrapApplication\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideShimmerConfig } from '@shimmer-from-structure/angular';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideShimmerConfig({\n      shimmerColor: 'rgba(56, 189, 248, 0.4)',\n      backgroundColor: 'rgba(56, 189, 248, 0.1)',\n      duration: 2.5,\n      fallbackBorderRadius: 8,\n    }),\n  ],\n});\n```\n\n### SolidJS (ShimmerProvider)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';\n\nfunction App() {\n  return (\n    <ShimmerProvider\n      config={{\n        shimmerColor: 'rgba(56, 189, 248, 0.4)',\n        backgroundColor: 'rgba(56, 189, 248, 0.1)',\n        duration: 2.5,\n        fallbackBorderRadius: 8,\n      }}\n    >\n      <Dashboard />\n    </ShimmerProvider>\n  );\n}\n```\n\n---\n\nComponents inside the provider automatically inherit values. You can still override them locally:\n\n**React**\n\n```tsx\n// Inherits blue theme from provider\n<Shimmer loading={true}><UserCard /></Shimmer>\n\n// Overrides provider settings\n<Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>\n```\n\n**Vue**\n\n```vue\n<!-- Inherits blue theme from provider -->\n<Shimmer :loading=\"true\"><UserCard /></Shimmer>\n\n<!-- Overrides provider settings -->\n<Shimmer :loading=\"true\" :duration=\"0.5\"><FastCard /></Shimmer>\n```\n\n**Svelte**\n\n```svelte\n<!-- Inherits blue theme from provider -->\n<Shimmer loading={true}><UserCard /></Shimmer>\n\n<!-- Overrides provider settings -->\n<Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>\n```\n\n**Angular**\n\n```typescript\n<!-- Inherits blue theme from injected config -->\n<shimmer [loading]=\"true\"><app-user-card /></shimmer>\n\n<!-- Overrides injected settings -->\n<shimmer [loading]=\"true\" [duration]=\"0.5\"><app-fast-card /></shimmer>\n```\n\n**SolidJS**\n\n```tsx\n<!-- Inherits blue theme from provider -->\n<Shimmer loading={true()}><UserCard /></Shimmer>\n\n<!-- Overrides provider settings -->\n<Shimmer loading={true()} duration={0.5}><FastCard /></Shimmer>\n```\n\n### Accessing Config in Hooks/Composables\n\nIf you need to access the current configuration in your own components:\n\n**React**\n\n```tsx\nimport { useShimmerConfig } from 'shimmer-from-structure';\n\nfunction MyComponent() {\n  const config = useShimmerConfig();\n  return <div style={{ background: config.backgroundColor }}>...</div>;\n}\n```\n\n**Vue**\n\n```javascript\nimport { useShimmerConfig } from '@shimmer-from-structure/vue';\n\nconst config = useShimmerConfig();\nconsole.log(config.value.backgroundColor);\n```\n\n**Svelte**\n\n```javascript\nimport { getShimmerConfig } from '@shimmer-from-structure/svelte';\n\nconst config = getShimmerConfig();\nconsole.log(config.backgroundColor);\n```\n\n**Angular**\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { injectShimmerConfig } from '@shimmer-from-structure/angular';\n\n@Component({\n  selector: 'app-my-component',\n  template: `<div [style.background]=\"config.backgroundColor\">...</div>`,\n})\nexport class MyComponent {\n  config = injectShimmerConfig();\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { useShimmerConfig } from '@shimmer-from-structure/solid';\n\nfunction MyComponent() {\n  const config = useShimmerConfig();\n  return <div style={{ background: config.backgroundColor }}>...</div>;\n}\n```\n\n## Best Practices\n\n### 1. Use `templateProps` for Dynamic Data\n\nWhen your component receives data via props, always provide `templateProps` with mock data that matches the expected structure.\n\n### 2. Match Template Structure to Real Data\n\nEnsure your template data has the same array length and property structure as real data for accurate shimmer layout.\n\n### 3. Use Individual Shimmer Components\n\nWrap each section in its own Shimmer for independent loading states:\n\n```tsx\n// ✅ Good - independent loading\n<Shimmer loading={loadingUsers}><UserList /></Shimmer>\n<Shimmer loading={loadingPosts}><PostList /></Shimmer>\n\n// ❌ Avoid - all-or-nothing loading\n<Shimmer loading={loadingUsers || loadingPosts}>\n  <UserList />\n  <PostList />\n</Shimmer>\n```\n\n### 4. Consider Element Widths\n\nBlock elements like `<h1>`, `<p>` take full container width. If you want shimmer to match text width:\n\n```css\n.title {\n  width: fit-content;\n}\n```\n\n### 5. Provide Container Dimensions\n\nFor async components (like charts), ensure containers have explicit dimensions so shimmer has something to measure.\n\n## ⚡ Performance Considerations\n\n- Measurement happens only when `loading` changes to `true`\n- Uses `useLayoutEffect` for synchronous measurement (no flicker)\n- Minimal re-renders - only updates when loading state or children change\n- Lightweight DOM measurements using native browser APIs\n\n- Lightweight DOM measurements using native browser APIs\n\n## 🛠️ Development\n\nThis is a monorepo managed with npm workspaces. Each package can be built independently:\n\n```bash\n# Install dependencies\nnpm install\n\n# Build all packages\nnpm run build\n\n# Build individual packages\nnpm run build:core\nnpm run build:react\nnpm run build:vue\nnpm run build:svelte\nnpm run build:main\n\n# Run tests\nnpm test\n```\n\n## 📝 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 🐛 Known Limitations\n\n- **Async components**: Components that render asynchronously (like charts using `ResponsiveContainer`) may need explicit container dimensions\n- **Zero-dimension elements**: Elements with `display: none` or zero dimensions won't be captured\n- **SVG internals**: Only the outer `<svg>` element is captured, not internal paths/shapes\n\n## 🏗️ Monorepo Structure\n\nThis library is organized as a monorepo with four packages:\n\n| Package                           | Description                                 | Size     |\n| --------------------------------- | ------------------------------------------- | -------- |\n| `@shimmer-from-structure/core`    | Framework-agnostic DOM utilities            | 1.44 kB  |\n| `@shimmer-from-structure/react`   | React adapter                               | 12.84 kB |\n| `@shimmer-from-structure/vue`     | Vue 3 adapter                               | 3.89 kB  |\n| `@shimmer-from-structure/svelte`  | Svelte adapter                              | 4.60 kB  |\n| `@shimmer-from-structure/angular` | Angular adapter                             | 6.83 kB  |\n| `@shimmer-from-structure/solid`   | SolidJS adapter                             | 4.01 kB  |\n| `shimmer-from-structure`          | Main package (React backward compatibility) | 0.93 kB  |\n\nThe core package contains all DOM measurement logic, while React, Vue, Svelte, Angular and SolidJS packages are thin wrappers that provide framework-specific APIs.\n\n## 🚧 Roadmap\n\n- [x] Dynamic data support via `templateProps`\n- [x] Auto border-radius detection\n- [x] Container background visibility\n- [x] **Vue.js adapter**\n- [x] **Svelte adapter**\n- [x] **Angular adapter**\n- [x] **SolidJS adapter**\n- [ ] Better async component support\n- [ ] Customizable shimmer direction (vertical, diagonal)\n- [ ] React Native support\n\n## 📚 Featured In\n\n- <a href=\"https://neciudan.dev/lets-build-dynamic-shimmer-skeletons\" target=\"_blank\" rel=\"noopener noreferrer\">Build your own shimmer skeleton that never goes out of sync</a> - Deep dive blog post on the implementation\n- <a href=\"https://svelte.dev/blog/whats-new-in-svelte-march-2026\" target=\"_blank\" rel=\"noopener noreferrer\">What's new in Svelte: March 2026</a> - Featured in Svelte's official blog\n- <a href=\"https://react.statuscode.com/issues/459\" target=\"_blank\" rel=\"noopener noreferrer\">React Status Issue #459</a> - Featured in React Status newsletter\n\n---\n\nMade with ❤️ for developers tired of maintaining skeleton screens\n","readmeFilename":"README.md"}