Brand components

Proof

three lines, Problem. / Built. / Result., with a bold sans lead word and serif text.

Problem. Tender documents were drafted by hand, so every bid started from a blank page.
Built. A Procurement Docs Platform that assembles, checks and exports the documents from one source.
Result. Drafting moved from days to hours, and every document carries a reviewable trail.

Install

bash

npx shadcn add @eloquent/proof

Usage

tsx

import { Proof } from "@/components/ui/proof";

<Proof
  aria-label="Procurement Docs Platform, in three lines"
  lines={[
    { label: "Problem.", text: "…" },
    { label: "Built.", text: "…" },
    { label: "Result.", text: "…" },
  ]}
/>

The labels are props, so a translation can set its own words and punctuation.

States

Problem. Slow.
Built. A queue.
Result. Fast.

Problem. Reviewers could not tell which clause had changed between drafts.
Built. A clause-level comparison that lists every change in reading order, with the reviewer named beside it.
Result. Review rounds fell from 5 to 2.

State	Treatment
Lead word	Barlow 700 (bold sans), with its full stop
Text	Source Serif 4, 16px, ink
Line	A hairline above each of the three lines
`lines`	Exactly three (a type error otherwise)

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Vấn đề. Hồ sơ mời thầu được soạn thủ công, nên mỗi gói thầu đều bắt đầu từ trang trắng.
Đã xây. Procurement Docs Platform lập, kiểm tra và xuất hồ sơ từ một nguồn duy nhất.
Kết quả. Việc soạn thảo rút từ vài ngày xuống vài giờ, và mọi tài liệu đều có dấu vết để rà soát.

Ink adaptation

Brand item with no upstream. A hairline above each line replaces a table or card border, and a bold sans lead word, not colour or an icon, carries the emphasis.