Skip to content
Dave Klein

DKProductCard is the product card from my gear pages, extracted into a component anyone can install. It renders the things I kept needing on this site: a product with a photo and a link, a retired product with a status band across the top, and a one-sentence note card in a blog post. It comes with a small remark plugin that does my favorite trick on this site: paste an Amazon link on its own line in a post, and it becomes a card at build time. The DK prefix is of course an homage to NeXTSTEP’s NS prefixes.

Try it

Fujifilm X-T4

Fujifilm X-T4

Mirrorless · 26.1 megapixels · APS-C sensor

Amazon

Retired
Sony RX1

Sony RX1

Mirrorless · 24 megapixels · 35mm full frame CMOS sensor

Amazon

Updated
The note card, for the sentence that arrives after publishing. Links inside get the accent treatment.

Install

npx shadcn@latest add https://diklein.com/r/dk-product-card.json

DKProductCard is distributed through the shadcn registry. The CLI drops the source into components/dk-product-card and the files are yours to keep or change. It also installs the remark plugin, @diklein/dkproductcard, from npm. The component itself has zero dependencies.

Use

Import the stylesheet once, then write cards wherever you want them:

import { DKProductCard } from '@/components/dk-product-card/product-card'
import '@/components/dk-product-card/dk-product-card.css'

<DKProductCard
  title="Heckler Design @Rest"
  description="The iPad stand that outlived the iPad."
  asin="B0ABCDEFGH"
  image="/images/gear/atrest.png"
/>

Give it an asinand it links to Amazon with an “Amazon” label. Give it an hrefand it links there with a “View” label. Give it neither and it renders as a plain unlinked card, with no hover affordance promising a click it cannot deliver.

A status strip labels the whole card before its content does:

<DKProductCard retired title="Apple iPod Hi-Fi" image="/images/gear/hifi.png" />

And a note card is a strip plus a sentence, which I use for post-publication updates inside articles:

<DKProductCard strip="Updated">
  This app was [removed](https://example.com) from the App Store in 2025.
</DKProductCard>

The Amazon trick

Add the plugin to your MDX pipeline:

// next.config.mjs
remarkPlugins: ['@diklein/dkproductcard']

Now a bare Amazon product link on its own line in any post becomes a card at build time. Links inside sentences are left alone. This is how the gear pages on this site are written: the markdown is just a list of links, and the cards are a build step.

Theming

Every color routes through a --dkpc-* token. Override them once and every card follows:

.dkpc-scope {
  --dkpc-accent: rebeccapurple;
  --dkpc-font-sans: 'Inter', sans-serif;
}

Dark mode follows the shadcn convention (a .dark class on <html>) and falls back to prefers-color-scheme when no theme class is present.