# Blur Placeholder

> Lightweight blurred placeholder shown while the real image loads.

Source: https://gallerykit.n.yatsyk.com/docs/blur-placeholder

# @gallerykit/blur-placeholder

**@gallerykit/blur-placeholder** renders a low-res blurred image (or solid colour fallback) while the full image is decoding. Pair it with any layout package or use it stand-alone — both a `<BlurPlaceholder>` component and a `useBlurPlaceholder` hook are exposed.

* **Stability:** experimental
* **Peer dependencies:** `react`, `react-dom`
* **Dependencies:** `@gallerykit/core`

## Install

```bash
pnpm add @gallerykit/blur-placeholder
```

## Quick example

```tsx
import { BlurPlaceholder } from "@gallerykit/blur-placeholder";

export function Cover({ src, blurDataUrl }: { src: string; blurDataUrl: string }) {
  return <BlurPlaceholder src={src} placeholder={blurDataUrl} alt="" />;
}
```

See [Getting Started](./getting-started.mdx) for the full walkthrough and [API](./api.mdx) for the public exports.