1 GitHub star = 1 new component.

Star the repo
Overlayslightboximageoverlay

Image Lightbox

Image viewer overlay with dimmed background and close button.

Nature Landscape / 2024

Usage

Copy and paste this code into your React component:

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

<LightboxOverlay>Content</LightboxOverlay>

Manual Installation

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

LightboxOverlay.tsx
'use client';

import './LightboxOverlay.css';

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

export function LightboxOverlay({}: LightboxOverlayProps) {
  return (
    <>
      <div className="lightbox" data-rk-746ba1="">
        <div className="close" data-rk-746ba1="">ร—</div>
        <div className="img-preview" data-rk-746ba1=""></div>
        <div className="caption" data-rk-746ba1="">Nature Landscape / 2024</div>
      </div>
    </>
  );
}

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

.lightbox:where([data-rk-746ba1]) { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.close:where([data-rk-746ba1]) { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; }
.img-preview:where([data-rk-746ba1]) { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; }
.caption:where([data-rk-746ba1]) { margin-top: 2rem; color: #94a3b8; font-family: monospace; }

Quick Info

Category
Overlays
Filename
LightboxOverlay.tsx
Dependencies
None โ€” pure React + CSS
Tags
lightboximageoverlay