components / skeleton
skeleton.
loading placeholder in block, text and circle shapes. shimmer keyframes ship inline via a hoisted style tag, so there is nothing to wire into globals.css. under reduced motion the sweep stops but the block stays — removing it would collapse the layout it exists to reserve.
installation
bunx @justin06lee/chrome@latest add skeletonprops
| name | type | default | description |
|---|---|---|---|
| variant | 'block' | 'text' | 'circle' | 'block' | |
| lines | number | 3 | number of bars for variant="text"; the last is shortened. |
| width | string | number | - | css width. defaults to full width, or a square side for circle. |
| height | string | number | - | css height. defaults per variant. |
| animate | boolean | true | turn off the shimmer for large grids where the sweep gets noisy. |
| label | string | null | 'loading' | announced while loading. pass null when a parent already owns the live region. |
| className | string | - |