1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capasmodaloverlayglass

Glass Modal

Ventana modal accesible con fondo oscurecido, foco bloqueado y cierre con Escape.

×

Confirm Action

Are you sure you want to proceed with this sensitive operation?

Uso

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

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

<OverlayModal>
  <div className="modal-content">
    <h3>Project Created</h3>
    <p>Your new workspace is ready to use.</p>
    <div className="flex-end mt-6">
      <GlassButton size="sm">Go to Dashboard</GlassButton>
    </div>
  </div>
</OverlayModal>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/OverlayModal.tsx + OverlayModal.css:

OverlayModal.tsx
'use client';

import './OverlayModal.css';

/** OverlayModal — ported from astro-component-kit. */
export interface OverlayModalProps {
}

export function OverlayModal({}: OverlayModalProps) {
  return (
    <>
      <div className="modal-overlay" data-rk-e1e17c="">
        <div className="modal-card anim-scale-up" data-rk-e1e17c="">
          <div className="modal-close" data-rk-e1e17c="">×</div>
          <h3 data-rk-e1e17c="">Confirm Action</h3>
          <p data-rk-e1e17c="">Are you sure you want to proceed with this sensitive operation?</p>
          <div className="modal-actions" data-rk-e1e17c="">
            <button className="cancel" data-rk-e1e17c="">Cancel</button>
            <button className="confirm" data-rk-e1e17c="">Continue</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default OverlayModal;
OverlayModal.css
/* OverlayModal — ported from astro-component-kit (overlays/OverlayModal.astro) */

.modal-overlay:where([data-rk-e1e17c]) { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 1000; }
.modal-card:where([data-rk-e1e17c]) { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); position: relative; }
.modal-close:where([data-rk-e1e17c]) { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: #94a3b8; font-size: 1.5rem; }
h3:where([data-rk-e1e17c]) { margin: 0 0 1rem; color: #fff; }
p:where([data-rk-e1e17c]) { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
.modal-actions:where([data-rk-e1e17c]) { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
button:where([data-rk-e1e17c]) { padding: 0.6rem 1.25rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
.cancel:where([data-rk-e1e17c]) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.confirm:where([data-rk-e1e17c]) { background: #6366f1; color: #fff; }

Información Rápida

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