Lightboxmedia

Full-screen image viewer with a fixed stage, keyboard and swipe navigation, counter, optional thumbnails and a renderImage adapter.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/lightbox

의존 아이템button dialog locale style

Default

lightbox-demo.tsx

import { Button } from "@/components/ui/button";import { Lightbox, type LightboxImage } from "@/components/ui/lightbox";
const swatch = (color: string) =>  `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><rect width="1200" height="800" fill="${color}"/></svg>`)}`;
export const lightboxDemoImages: readonly LightboxImage[] = [  { src: swatch("#c0392b"), alt: "Red room" },  { src: swatch("#2980b9"), alt: "Blue lobby" },  { src: swatch("#27ae60"), alt: "Green garden" },];
export default function LightboxDemo() {  return <Lightbox images={lightboxDemoImages} trigger={<Button variant="outline">Open gallery</Button>} />;}