React Case Study Card

Every enterprise buyer asks the same question before they can choose you: who else like me has done this, and what happened? This is that answer in one card — challenge, approach, and the numbers, with the numbers given the loudest surface on the page.

Northfield Grid Operations

Energy

Challenge: Substation telemetry was signed in software on 40,000 field controllers. Key rotation took eleven weeks per cycle and a regulator deadline was fifteen months out.
Approach: Dropped the KLV-7000 onto the existing controller board and moved signing and key storage into hardware. No firmware rewrite — the SDK kept the same call signature.

“We budgeted a year for the migration and finished the first region in six weeks. The part that surprised us was that nothing else had to change.”
Dana Whitlock · Director of Grid Security, Northfield

Read the full study

Installation

npx shadcn@latest add "https://kelvinui.com/registry/case-study-card.json"

Props

Prop	Type	Description
customer	string	Company name
industry	string	Chip beside the name
challenge	string	The situation before
approach	string	What was actually done
metrics	CaseStudyMetric[]	{ label, value, trend?, sub? }
quote	{ text, author, role? }	Pull quote with attribution
href	string	Link to the full study
linkLabel	string	Link text (default "Read the full study")

Writing one that works

The results rail sits on the deep surface with the electric accent — the one place in Kelvin where that colour is legal, and it earns it here, because the metrics are the entire reason the card exists.

Which means the metrics have to survive scrutiny:

Give the baseline. "38× faster" means nothing; "11 weeks → 2 days" is checkable. That is what sub is for.
Three metrics, maximum. A fourth reads as padding and dilutes the first three.
Name the person. An unattributed quote is worth less than no quote — readers assume you wrote it yourself.
Say what did not change. The most persuasive line in the demo above is "nothing else had to change", because it addresses the objection the buyer actually has: migration cost.