1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capasmaskoverlayutility

Backdrop Mask

Máscara de desenfoque de fondo para concentrar la atención en el elemento central.

Backdrop Blur

Uso

Copia y pega este código directamente en tu componente React:

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

<BackdropBlurMask>Content</BackdropBlurMask>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: 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; }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
BackdropBlurMask.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
maskoverlayutility