A Before and After split with a spinning VS badge between two contrasting panels, and a metric strip whose bars grow to show the change.
Before and after
What changed for the content team at Northwind after moving 1,200 pages to Inkwell in a single sprint.
Time to publish
Before: 3 days, After: 20 min
Tools in the stack
Before: 9, After: 1
Review rounds
Before: 6, After: 2
Monthly spend
Before: $1,840, After: $390
npx shadcn@latest add https://hyperblur.dev/r/comparison-versus.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-versus.tsx.
import { ComparisonVersus } from "@/components/hyperblur/comparison-versus"
<ComparisonVersus badge="VS" accent="#10b981" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Before and after" | Small label above the title. Empty hides it. |
| title | string | "Same launch. One-tenth of the busywork." | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| before | { label: string; title: string; points: string[] } | Before panel | Left panel, styled muted with cross marks. |
| after | { label: string; title: string; points: string[] } | After panel | Right panel, styled with the accent and checks. |
| metrics | { label: string; before: string; after: string; ratio: number }[] | 4 metrics | Metric strip. ratio from 0 to 1 sets the length of the after bar against the full before bar. |
| badge | string | "VS" | Text inside the center badge. |
| accent | string | "#22d3ee" | After panel, badge ring and bar color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |