Content-shaped placeholders for a post feed, an inbox or a card grid, with one diagonal shimmer that travels across every bone in order. When loading ends, the real children fade in from a soft blur.
npx shadcn@latest add https://hyperblur.dev/r/loader-skeleton-feed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-skeleton-feed.tsx.
import { LoaderSkeletonFeed } from "@/components/hyperblur/loader-skeleton-feed"
<LoaderSkeletonFeed variant="inbox" rows={4} loading={isLoading}>{messages}</LoaderSkeletonFeed>| Prop | Type | Default | Description |
|---|---|---|---|
| loading | boolean | true | Shows the skeleton while true and the children once false. |
| variant | "post" | "inbox" | "card" | "post" | Layout of the placeholder shapes. |
| rows | number | 3 | Number of posts, inbox rows or cards, from 1 to 8. |
| base | string | "#1a1a1a" | Base color of the bones. |
| highlight | string | "#2c2c2c" | Color of the shimmer band. |
| accent | string | "#2f7bff" | Tint of the media placeholder icon. |
| speed | number | 1.8 | Seconds for one shimmer pass. |
| label | string | "Loading content" | Text announced to screen readers while loading. |
| children | ReactNode | Real content shown when loading is false. |