Case Study Spread

Installation

pnpm dlx shadcn@latest add @cleverui/case-study-spread

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CaseStudySpread } from '@/components/blocks/case-study-spread'

Exampletsx

'use client'

import { CaseStudySpread } from '@/components/blocks/case-study-spread'

export default function CaseStudySpreadDemo() {
  return (
    <CaseStudySpread
      eyebrow="Case study"
      client="Alpine Bank"
      summary="Repositioned the brand and rebuilt the storefront in eleven weeks, from first workshop to public launch."
      metrics={[
        {
          value: 212,
          prefix: '+',
          suffix: '%',
          label: 'Organic sessions',
        },
        {
          value: 4.8,
          prefix: '$',
          suffix: 'M',
          decimals: 1,
          label: 'Deposits originated in quarter one',
        },
        {
          value: 1.2,
          suffix: 's',
          decimals: 1,
          label: 'Median page load on 4G',
        },
      ]}
      scope={[
        'Brand identity',
        'Design system in code',
        'Marketing site rebuild',
        'Branch wayfinding kit',
      ]}
      meta="BRAND · 2026 · 11 WKS"
      quote={{
        quote:
          'They shipped a bank that finally looks like the one we run, and the numbers followed the work.',
        name: 'Mara Chen',
        jobTitle: 'Chief Marketing Officer',
      }}
      ctaHref="#alpine-bank"
      ctaLabel="Read the case study"
    />
  )
}

API reference

CaseStudySpread accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Case study'`	quiet spaced sans label above the client name
`client`*	`string`	–	client or project name, the spread's display-type hero
`summary`*	`string`	–	one or two plain sentences of what was done
`metrics`*	`CaseStudyMetric[]`	–	2–4 outcomes
`scope`	`string[]`	–	3–5 short deliverable receipts
`scopeLabel`	`string`	`'Scope'`	–
`meta`	`string`	–	PREFORMATTED mono reference line, e.g. 'BRAND · 2026 · 12 WKS'
`quote`	`CaseStudyQuote`	–	–
`ctaHref`	`string`	–	–
`ctaLabel`	`string`	`'Read the case study'`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CaseStudyMetric {
  value: number
  prefix?: string
  suffix?: string
  decimals?: number
  /** sentence-case, e.g. 'Organic sessions' */
  label: string
}

export interface CaseStudyQuote {
  quote: string
  name: string
  jobTitle?: string
}

Related components

Selected Work Index

A selected-work index for agency and studio sites, oversized project titles on hairline rows, each carrying sector, year and a preformatted result metric. React and Tailwind.

Capability Matrix

An agency capability matrix, a seamed hairline grid of disciplines with plain summaries, deliverable receipts and a preformatted proof stat each. A React block themed with Tailwind.

Studio Process Reveal

A studio process rail, oversized phase numerals reveal along a drawn hairline with a duration and deliverable per phase. An editorial React and Tailwind block where motion is the pitch.

Agency Studio Template

A portfolio index for a design studio: display-type statement hero, oversized case rows with hover and tap preview plates, capability accordion, results strip, recognition ledger, brief form.

Editorial Index Hero

A magazine-cover hero, oversized masthead type beside a numbered index of destinations, each row a drawn hairline that extends on hover. Navigation as the artwork.

Auction Results Strip

Last weekend's auction results as a ruled band, a clearance rate counting up once, then sold and passed-in rows with addresses leading and prices set in tabular figures.

Frequently asked questions

How do I install the Case Study Spread component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/case-study-spread`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Case Study Spread require?

Case Study Spread uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Case Study Spread to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code