Proof block

Block

Logos set as type, a case study led by one number, press with outlet and date, and live figures with their source.

Installs components/ui/proof-block.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/proof-block.json

Ostra Freight
Lumen Labs
Kestrel Bio
Northwind
Tide Physio

9→1days to close the books at Ostra Freight

“The first month we trusted it, our auditors asked for the audit trail export instead of our spreadsheets.”

Ana Reyes, Financial controller

Read the Ostra case study

When to use #

Use it for

After the hero or before pricing, to answer whether others trust it.
You have one customer number worth leading with.

Skip it when

Logos you have no permission to show.
Figures you cannot link to a source.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/proof-block.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { type ReactNode } from "react"
import { ProofBlock } from "@/components/ui/proof-block"

function Frame({ children }: { children: ReactNode }) {
  return <div className="w-full overflow-hidden rounded-[14px] shadow-[0_0_0_1px_var(--border)]">{children}</div>;
}

const proof: Parameters<typeof ProofBlock>[0] = { logos: ["Ostra Freight", "Lumen Labs", "Kestrel Bio", "Northwind", "Tide Physio"], caseStudy: { figure: "9→1", figureLabel: "days to close the books at Ostra Freight", quote: "The first month we trusted it, our auditors asked for the audit trail export instead of our spreadsheets.", person: "Ana Reyes, Financial controller", action: { label: "Read the Ostra case study", href: "#" } } };

export function ProofBlockDemo() {
  return <Frame><ProofBlock {...proof} /></Frame>;
}

API reference #

ProofBlock

component

PropTypeDefaultDescription

titlestring—

logos *readonly string[]—Company names, set as type.

caseStudy{ figure: string; figureLabel: string; quote: string; person: string; action?: BlockAction | undefined; }—

pressreadonly { quote: string; outlet: string; date: string; }[]—

statsreadonly BlockStat[]—

sourcestring—Where live figures come from, e.g. "status.northwind.dev, refreshed hourly".

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.