Lightbox

Click-to-expand viewer for images, artwork and video: the thumbnail zooms into a full-screen view you browse with arrows, keys or swipes.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/lightbox

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Triggers can sit anywhere inside <Lightbox>, at any depth: figures scattered through a case study still open as one set, in reading order.

One image on its own: no counter, no arrows — just zoom in, and tap, swipe down or press Esc to put it back.

Captions take block content: each photograph opens with a line of text and its shooting data from <PhotoMeta>.