Components

React components extracted from this site, published under the @diklein registry and installable with the shadcn CLI or from npm. Every demo below is the real component running live, the same files the install command ships.

DKProductCard

A product card for MDX blogs, with a remark plugin that turns a bare Amazon link on its own line into a card at build time.

Demo & docs · Introduction · npm · GitHub

npx shadcn@latest add @diklein/dk-product-card

Fujifilm X-T4

Mirrorless · 26.1 megapixels · APS-C sensor

Amazon

DKMediaViewer

A minimalist photo and video viewer: masonry grid, fly-in lightbox, crossfading carousel, captions and camera EXIF data.

Demo & docs · Introduction · npm · GitHub

npx shadcn@latest add @diklein/dk-media-viewer

Black and white staircase with a handrail and strong shadows. — Click the photo. Esc, swipe down, or × closes it.

DKBezeler

Bakes screenshots and screen recordings into device bezel frames at build time, and ships the display components for the results.

Demo & docs · Introduction · npm · GitHub

npx shadcn@latest add @diklein/dk-bezeler

A screenshot baked into an iPhone bezel frame