1 GitHub star = 1 new component.

Star the repo
Overlaysmaskoverlayutility

Backdrop Mask

Full viewport backdrop blur scrim.

Backdrop Blur

Usage

Copy and paste this code into your React component:

tsx
import { BackdropBlurMask } from 'react-component-kit-ui/overlays';

<BackdropBlurMask>Content</BackdropBlurMask>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/BackdropBlurMask.tsx + BackdropBlurMask.css:

BackdropBlurMask.tsx
'use client';

import './BackdropBlurMask.css';

/** BackdropBlurMask โ€” ported from astro-component-kit. */
export interface BackdropBlurMaskProps {
}

export function BackdropBlurMask({}: BackdropBlurMaskProps) {
  return (
    <>
      <div className="mask" data-rk-88f2da=""></div>
    </>
  );
}

export default BackdropBlurMask;
BackdropBlurMask.css
/* BackdropBlurMask โ€” ported from astro-component-kit (overlays/BackdropBlurMask.astro) */

.mask:where([data-rk-88f2da]) { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; }

Quick Info

Category
Overlays
Filename
BackdropBlurMask.tsx
Dependencies
None โ€” pure React + CSS
Tags
maskoverlayutility