1 GitHub star = 1 new component.

Star the repo
Overlaysmodaloverlayglass

Glass Modal

Accessible dialog modal with backdrop scrim and keyboard trap.

ร—

Confirm Action

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

Usage

Copy and paste this code into your React component:

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>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Overlays
Filename
OverlayModal.tsx
Dependencies
None โ€” pure React + CSS
Tags
modaloverlayglass