Image Lightbox

Installation

npx shadcn@latest add https://chewypixel.io/r/image-lightbox.json

Usage

import Image from "next/image";
import { ImageLightbox } from "@/components/ui/image-lightbox";

export function ProductPhoto() {
  return (
    <ImageLightbox src="/products/gumdrops.jpg" alt="A jar of gumdrops" className="rounded-xl">
      <Image src="/products/gumdrops.jpg" alt="" width={240} height={160} className="rounded-xl object-cover" />
    </ImageLightbox>
  );
}

Props

src

The full-size image.

string

alt

Describes the image. It's also shown as the title above it.

string

round

Opens as a circle, for avatars.

boolean = false

unoptimized

Skips Next.js image optimization for the full-size image. Remote images need it, or their host in images.remotePatterns.

boolean = false

children

The thumbnail. Any element works.

ReactNode

Released under the MIT License.

More components

• Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
• TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
• SwitchA switch whose thumb springs across when toggled and stretches while pressed.
• CheckboxA checkbox that draws its check mark and squishes when pressed.