@hollow-kit/react

React 18+ skeleton loading component powered by Hollow Kit.

Installation

pnpm add @hollow-kit/react

Usage

import { Skeleton } from '@hollow-kit/react'

<Skeleton
  loading={isLoading}
  name="card"
  fallback={<div className="animate-pulse h-48 bg-gray-200 rounded" />}
>
  <MyCard data={data} />
</Skeleton>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | loading | boolean | required | Show skeleton when true | | children | ReactNode | required | Content to show when loaded | | name | string | — | Name for registry lookup | | initialHollows | HollowResult \| ResponsiveHollows | — | Pre-generated hollow data | | color | string | rgba(0,0,0,0.08) | Bone color (light mode) | | darkColor | string | rgba(255,255,255,0.06) | Bone color (dark mode) | | animate | boolean | true | Pulse animation | | autoCapture | boolean | false | Self-capture on first render | | fallback | ReactNode | — | Loading state without hollows | | fixture | ReactNode | — | Content for build-mode capture |

License

MIT