React Gated Content Card

Gating works when the exchange is fair and visible. This shows what is inside, states the cost up front, asks for the minimum, and keeps the marketing opt-in genuinely optional.

Whitepaper

Harvest now, decrypt later: a migration timeline for industrial fleets

Why traffic you encrypt today is already at risk, and how to sequence a post-quantum migration across a fleet you cannot take offline.

What’s inside

A threat model that distinguishes real urgency from vendor noise
Migration sequencing for fleets with 10-year field lifetimes
Where hybrid key exchange buys you time, and where it does not
A worked cost model for a 40,000-node deployment

18 pagesPDF · 1.4 MB

Installation

npx shadcn@latest add "https://kelvinui.com/registry/gated-content.json"

Props

Prop	Type	Description
title	string	Asset title
description	string	One-paragraph summary
contents	string[]	What's inside — the reason to trade an email
kind	string	e.g. "Whitepaper" (default)
pages fileSize	number / string	Shown before the download
previewHref	string	Ungated summary — strongly recommended
downloadHref	string	Delivered after submit
onSubmit	(payload) => void	—

Three rules that keep it honest

The opt-in is unticked and separate. Consenting to marketing is not the same act as downloading a PDF, and bundling them is precisely what the GDPR calls out as invalid consent. The consent flag comes through onSubmit separately so you can respect it. The download works either way, and the label says so.
Show the contents before the gate. A reader deciding whether an email is worth it needs to know what they get. contents, pages, and fileSize all sit on the ungated side.
Offer an ungated path. previewHref gives a summary to people who will not trade an email. You lose nothing — they were never going to fill the form — and you keep a reader who may return.