---
name: "@dkmediaviewer"
slug: "dkmediaviewer"
description: "A minimalist, performant, and elegant photo and video viewer for React. Masonry grid, fly-in lightbox, a crossfading carousel, captions and camera EXIF data."
category: "Forms"
tags: ["cards", "forms", "media"]
framework: "react"
license: "MIT"
author: "diklein"
website: "https://diklein.com/dkmediaviewer"
github: "https://github.com/diklein/dkmediaviewer"
registry: "https://diklein.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 3
generated_at: "2026-07-28T08:59:05.895Z"
---

# @dkmediaviewer

A minimalist, performant, and elegant photo and video viewer for React. Masonry grid, fly-in lightbox, a crossfading carousel, captions and camera EXIF data.

## Links

- Website: https://diklein.com/dkmediaviewer
- GitHub: https://github.com/diklein/dkmediaviewer
- Registry JSON: https://diklein.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/dkmediaviewer
- This file: https://sh4dcn.vercel.app/md/dkmediaviewer.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://diklein.com/r/registry.json
pnpm dlx shadcn@latest add https://diklein.com/r/registry.json
bunx shadcn@latest add https://diklein.com/r/registry.json
# clone the source repo
git clone https://github.com/diklein/dkmediaviewer.git
# fetch the raw registry index
curl -s https://diklein.com/r/registry.json
```

## Components (3)

| name | type | description | install |
| --- | --- | --- | --- |
| dk-product-card | registry:component | A product card for MDX blogs. Title, description, image, status strip, and note-style bodies. Pairs with the @diklein/dkproductcard remark plugin, which turns … | `npx shadcn@latest add https://diklein.com/r/dk-product-card.json` |
| dk-media-viewer | registry:component | A minimalist, performant, and elegant photo and video viewer for React. Masonry grid, fly-in lightbox, a crossfading carousel, captions and camera EXIF data, l… | `npx shadcn@latest add https://diklein.com/r/dk-media-viewer.json` |
| dk-bezeler | registry:component | Display components for DKBezeler's baked device frames: a framed still as a plain image, and the light and dark video versions swapped with CSS. Bake the asset… | `npx shadcn@latest add https://diklein.com/r/dk-bezeler.json` |

## For AI agents

```text
You are adding components from @dkmediaviewer to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/dkmediaviewer.md) for the component list.
2. Fetch the machine-readable index: https://diklein.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: dkmediaviewer).
```