Customer-proof set pairing a featured split story with a sticky results panel, a filterable story index, three-up metric cards, a before-and-after metric comparison table, and a compact results strip.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/case-study.json$npx shadcn@latest add https://uipkge.dev/r/react/case-study.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/case-study.json$bunx shadcn@latest add https://uipkge.dev/r/react/case-study.jsonnpx shadcn@latest add @uipkge-react/case-studyInstalls to:components/blocks/case-study/'use client'
import { ArrowRight, Quote } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
const results = [
{ value: '5 days', label: 'off the monthly close' },
{ value: '11 → 1', label: 'reconciliation spreadsheets' },
{ value: '340', label: 'certified metrics published' },
{ value: '6 weeks', label: 'kickoff to full hand-over' },
]
const facts = [
{ term: 'Industry', detail: 'Freight forwarding' },
{ term: 'Size', detail: '1,200 staff · 18 countries' },
{ term: 'Stack', detail: 'Snowflake · dbt · Okta' },
{ term: 'Live since', detail: 'Q1 2026' },
]
export function CaseStudyFeaturedStory() {
return (
<section data-slot="case-study-featured-story" className="bg-background">
<div className="mx-auto max-w-6xl px-6 py-20 lg:py-28">
<div className="grid gap-12 lg:grid-cols-[1.4fr_1fr] lg:gap-16">
<article>
<Badge variant="secondary">Case study</Badge>
<h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
How Northwind Logistics closed the books five days early
</h2>
<div className="mt-8 space-y-8">
<div>
<h3 className="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The challenge</h3>
<p className="mt-2.5 leading-relaxed">
Month-end ran on eleven spreadsheets maintained by four people across three time zones. Every close
opened with a reconciliation pass nobody had budgeted for, and restatements were tracked in email.
</p>
</div>
<div>
<h3 className="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The approach</h3>
<p className="mt-2.5 leading-relaxed">
We mirrored the warehouse schema, rebuilt revenue and margin as versioned definitions, and reconciled
them against the prior four quarters before anything was published. A single regional team piloted the
first close; the rest of finance moved over two weeks later.
</p>
</div>
<div>
<h3 className="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The result</h3>
<p className="mt-2.5 leading-relaxed">
Close now starts from a reconciled position. Restatements open a reviewable change instead of a
thread, and the audit pack is generated from the same history.
</p>
</div>
</div>
<figure className="border-border mt-10 border-l-2 pl-6">
<Quote className="text-muted-foreground/60 size-5" aria-hidden="true" />
<blockquote className="mt-3 text-lg leading-snug font-medium text-balance">
We stopped arguing about whose number was right and started arguing about what to do next. That is the
whole change, and it was worth the six weeks.
</blockquote>
<figcaption className="mt-5 flex items-center gap-3">
<Avatar className="size-9">
<AvatarFallback className="text-xs">EW</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium">Erin Walsh</p>
<p className="text-muted-foreground text-xs">VP Finance, Northwind Logistics</p>
</div>
</figcaption>
</figure>
<Button className="mt-10">
Read the full story
<ArrowRight className="ml-2 size-4" aria-hidden="true" />
</Button>
</article>
{/* Sticky results panel: keeps the numbers in view while the narrative scrolls. */}
<aside className="lg:sticky lg:top-24 lg:self-start">
<Card>
<CardContent className="p-6">
<h3 className="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Results</h3>
<dl className="mt-5 grid grid-cols-2 gap-x-4 gap-y-6">
{results.map((result) => (
<div key={result.label}>
<dt className="sr-only">{result.label}</dt>
<dd>
<span className="font-display block text-2xl font-bold tracking-tight">{result.value}</span>
<span className="text-muted-foreground mt-1 block text-xs leading-snug">{result.label}</span>
</dd>
</div>
))}
</dl>
<Separator className="my-6" />
<dl className="space-y-3">
{facts.map((fact) => (
<div key={fact.term} className="flex items-baseline justify-between gap-4 text-sm">
<dt className="text-muted-foreground">{fact.term}</dt>
<dd className="text-right font-medium">{fact.detail}</dd>
</div>
))}
</dl>
</CardContent>
</Card>
</aside>
</div>
</div>
</section>
)
}
'use client'
import { Fragment, useMemo, useState } from 'react'
import { ArrowUpRight } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
const studies = [
{
company: 'Northwind Logistics',
industry: 'Logistics',
result: '5 days off the monthly close',
stack: 'Snowflake · dbt · Okta',
readTime: '8 min',
},
{
company: 'Halden Health',
industry: 'Healthcare',
result: '71% fewer ad-hoc data requests',
stack: 'BigQuery · Airflow',
readTime: '6 min',
},
{
company: 'Verity Retail Group',
industry: 'Retail',
result: '2.4pp tighter forecast band',
stack: 'Redshift · dbt',
readTime: '7 min',
},
{
company: 'Calder Manufacturing',
industry: 'Manufacturing',
result: '11 spreadsheets retired',
stack: 'Postgres · Dagster',
readTime: '5 min',
},
{
company: 'Ridgeway Freight',
industry: 'Logistics',
result: 'Per-shipment landed cost',
stack: 'Snowflake · Fivetran',
readTime: '9 min',
},
{
company: 'Ashford Clinics',
industry: 'Healthcare',
result: 'PHI-scoped self-serve reporting',
stack: 'BigQuery · Entra ID',
readTime: '6 min',
},
]
const ALL = 'All'
const industries = [ALL, ...new Set(studies.map((study) => study.industry))]
export function CaseStudyFilterableList() {
const [active, setActive] = useState(ALL)
const visible = useMemo(
() => (active === ALL ? studies : studies.filter((study) => study.industry === active)),
[active],
)
return (
<section data-slot="case-study-filterable-list" className="bg-background">
<div className="mx-auto max-w-4xl px-6 py-20 lg:py-28">
<div className="flex flex-wrap items-end justify-between gap-6">
<div>
<Badge variant="secondary">Customer stories</Badge>
<h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Read one close to your own</h2>
</div>
<ToggleGroup
value={active}
type="single"
variant="outline"
size="sm"
className="flex-nowrap overflow-x-auto"
aria-label="Filter case studies by industry"
// Single-select emits '' when the pressed chip is pressed again;
// fall back to ALL so the list is never empty by accident.
onValueChange={(value: string) => setActive(value || ALL)}
>
{industries.map((industry) => (
<ToggleGroupItem key={industry} value={industry}>
{industry}
</ToggleGroupItem>
))}
</ToggleGroup>
</div>
<Card className="mt-8">
<CardContent className="p-2">
{!visible.length ? (
<div className="px-4 py-16 text-center">
<p className="text-sm font-medium">No stories in that industry yet.</p>
<Button variant="outline" size="sm" className="mt-4" onClick={() => setActive(ALL)}>
Show all
</Button>
</div>
) : (
<ul>
{visible.map((study, index) => (
<Fragment key={study.company}>
<li>
<a
href="#"
className="hover:bg-muted focus-visible:ring-ring group flex items-center gap-4 rounded-lg p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
<p className="text-sm font-semibold">{study.company}</p>
<Badge variant="outline">{study.industry}</Badge>
</div>
<p className="mt-1 text-sm">{study.result}</p>
<p className="text-muted-foreground mt-1 font-mono text-xs">{study.stack}</p>
</div>
<span className="text-muted-foreground shrink-0 text-xs">{study.readTime}</span>
<ArrowUpRight
className="text-muted-foreground size-4 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
aria-hidden="true"
/>
</a>
</li>
{index < visible.length - 1 && <Separator />}
</Fragment>
))}
</ul>
)}
</CardContent>
</Card>
</div>
</section>
)
}
'use client'
import { ArrowUpRight } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
const studies = [
{
metric: '5 days',
metricLabel: 'off the monthly close',
company: 'Northwind Logistics',
industry: 'Freight forwarding · 1,200 staff',
outcome: 'Replaced eleven reconciliation spreadsheets with one certified revenue model.',
quote: 'We stopped arguing about whose number was right and started arguing about what to do next.',
author: { name: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },
},
{
metric: '71%',
metricLabel: 'fewer ad-hoc data requests',
company: 'Halden Health',
industry: 'Provider network · 40 clinics',
outcome: 'Clinic leads self-serve their own quality metrics without filing a ticket.',
quote: 'The analytics team went from a request queue to actually building things again.',
author: { name: 'Daniel Brooks', role: 'Head of Analytics', initials: 'DB' },
},
{
metric: '2.4pp',
metricLabel: 'tighter forecast accuracy',
company: 'Verity Retail Group',
industry: 'Omnichannel retail · 310 stores',
outcome: 'Sales and finance now forecast off the same pipeline definition, snapshotted weekly.',
quote: 'Forecast review stopped opening with twenty minutes of reconciling two decks.',
author: { name: 'Priya Raman', role: 'RevOps Director', initials: 'PR' },
},
]
export function CaseStudyMetricCards() {
return (
<section data-slot="case-study-metric-cards" className="bg-background">
<div className="mx-auto max-w-6xl px-6 py-20 lg:py-28">
<div className="flex flex-wrap items-end justify-between gap-6">
<div className="max-w-2xl">
<Badge variant="secondary">Customer results</Badge>
<h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">What changed after the rollout</h2>
<p className="text-muted-foreground mt-3 text-lg">
Three teams, measured against their own numbers from the quarter before.
</p>
</div>
<Button variant="outline">All case studies</Button>
</div>
<div className="mt-10 grid gap-4 md:grid-cols-3">
{studies.map((study) => (
<Card key={study.company} className="group">
<CardContent className="flex h-full flex-col p-6">
{/* Metric leads: it is the only part that survives a skim. */}
<p className="font-display text-4xl font-bold tracking-tight">{study.metric}</p>
<p className="text-muted-foreground mt-1 text-sm">{study.metricLabel}</p>
<Separator className="my-5" />
<p className="text-sm font-semibold">{study.company}</p>
<p className="text-muted-foreground mt-0.5 text-xs">{study.industry}</p>
<p className="mt-4 text-sm leading-relaxed">{study.outcome}</p>
<blockquote className="border-border text-muted-foreground mt-5 border-l-2 pl-4 text-sm italic">
“{study.quote}”
</blockquote>
<div className="mt-auto flex items-center gap-3 pt-6">
<Avatar className="size-8">
<AvatarFallback className="text-xs">{study.author.initials}</AvatarFallback>
</Avatar>
<div className="min-w-0">
<p className="truncate text-sm font-medium">{study.author.name}</p>
<p className="text-muted-foreground truncate text-xs">{study.author.role}</p>
</div>
<Button
variant="ghost"
size="icon"
className="ml-auto"
aria-label={`Read the ${study.company} case study`}
>
<ArrowUpRight
className="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
aria-hidden="true"
/>
</Button>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
)
}
'use client'
import { ArrowRight, TrendingDown, TrendingUp } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
// `better` records which direction is good, so the delta colour never has to be
// hard-coded per row — a falling close time is good, falling accuracy is not.
const metrics = [
{ name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },
{ name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },
{ name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },
{ name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },
]
export function CaseStudyMetricComparison() {
return (
<section data-slot="case-study-metric-comparison" className="bg-background">
<div className="mx-auto max-w-4xl px-6 py-20 lg:py-28">
<Badge variant="secondary">Northwind Logistics</Badge>
<h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
Two quarters either side of the rollout
</h2>
<p className="text-muted-foreground mt-3 text-lg">
Their numbers, their definitions, measured the same way before and after. Nothing normalised.
</p>
<Card className="mt-8">
<CardContent className="p-0">
<Table>
<TableHeader>
<TableRow>
<TableHead>Metric</TableHead>
<TableHead className="text-right">Q4 2025</TableHead>
<TableHead className="text-right">Q2 2026</TableHead>
<TableHead className="text-right">Change</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{metrics.map((metric) => {
const Trend = metric.better === 'down' ? TrendingDown : TrendingUp
return (
<TableRow key={metric.name}>
<TableCell className="font-medium">{metric.name}</TableCell>
<TableCell className="text-muted-foreground text-right font-mono text-sm">
{metric.before}
</TableCell>
<TableCell className="text-right font-mono text-sm font-semibold">{metric.after}</TableCell>
<TableCell className="text-right">
<span className="text-success inline-flex items-center gap-1.5 font-mono text-sm">
<Trend className="size-3.5" aria-hidden="true" />
{metric.delta}
</span>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
<Separator />
<p className="text-muted-foreground px-6 py-4 text-xs leading-relaxed">
Measured from their own close calendar and ticket queue. The rollout completed between the two quarters;
no headcount was added or removed in finance during the period.
</p>
</CardContent>
</Card>
<Button className="mt-8">
Read how they did it
<ArrowRight className="ml-2 size-4" aria-hidden="true" />
</Button>
</div>
</section>
)
}
'use client'
import { ArrowRight } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
// One result per customer. A second number halves the weight of the first.
const results = [
{ wordmark: 'Northwind', metric: '5 days', label: 'off the monthly close' },
{ wordmark: 'Halden', metric: '71%', label: 'fewer ad-hoc requests' },
{ wordmark: 'Verity', metric: '2.4pp', label: 'tighter forecast band' },
{ wordmark: 'Calder', metric: '11 → 1', label: 'reporting spreadsheets' },
]
export function CaseStudyResultsStrip() {
return (
<section data-slot="case-study-results-strip" className="border-border bg-card border-y">
<div className="mx-auto max-w-6xl px-6 py-10">
<div className="flex flex-wrap items-center justify-between gap-4">
<Badge variant="secondary">Proven</Badge>
<Button variant="link" className="h-auto p-0 text-sm">
All case studies
<ArrowRight className="ml-1.5 size-3.5" aria-hidden="true" />
</Button>
</div>
<div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:gap-0">
{results.map((result, index) => (
<div key={result.wordmark} className="relative lg:px-6 lg:first:pl-0">
<p className="text-sm font-semibold tracking-[0.18em] uppercase">{result.wordmark}</p>
<p className="font-display mt-3 text-3xl font-bold tracking-tight">{result.metric}</p>
<p className="text-muted-foreground mt-1 text-sm">{result.label}</p>
{index < results.length - 1 && (
<Separator orientation="vertical" className="absolute top-0 right-0 hidden h-full lg:block" />
)}
</div>
))}
</div>
</div>
</section>
)
}
Raw manifest:https://uipkge.dev/r/react/case-study.json
