Sable Materials
27% less waste
Plant leads can now spot material variance before each production run.
Case Study Logo Strip
A free customer proof and case-study logo section for Next.js and React.
Proof that compounds
Four teams replaced fragmented handoffs with one clear operating rhythm.
Northstar Health
42% faster
Care teams moved from referral to first appointment in under two days.
Meridian Freight
18 hours saved
Every regional dispatch now closes the weekly planning cycle in one shift.
Fieldwork Finance
3.4× adoption
Advisers replaced spreadsheet handoffs with one compliant client workflow.
Customise
280px
6px
24px
Code
<LogoCaseStudyStrip
title="Proof that compounds"
description="Four teams replaced fragmented handoffs with one clear operating rhythm."
items={caseStudies}
/>Case Study Logo Strip is a free customer proof section for Next.js and React, styled with Tailwind and built as a native horizontal evidence rail. Each card keeps a customer name, logo, result metric and outcome visible at rest, with optional links to complete case studies.
The Server Component uses no client-side JavaScript, keeps manual scrolling and scroll snapping available on every device, and limits hover and focus motion to transforms and opacity. Reduced-motion users receive the same complete evidence in a static layout.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/logo-case-study-stripUsage
import { LogoCaseStudyStrip } from "@/components/logo-case-study-strip";
const caseStudies = [
{
id: "northstar",
name: "Northstar Health",
logo: <NorthstarMark />,
metric: "42% faster",
outcome: "Care teams moved from referral to first appointment in under two days.",
href: "/customers/northstar",
},
{
id: "meridian",
name: "Meridian Freight",
logo: <MeridianMark />,
metric: "18 hours saved",
outcome: "Regional dispatch now closes weekly planning in one shift.",
},
];
export default function CustomerResults() {
return (
<LogoCaseStudyStrip
title="Proof that compounds"
description="Teams replacing fragmented handoffs with one clear operating rhythm."
items={caseStudies}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | LogoCaseStudyItem[] | required | Case studies rendered in source order. Empty input renders nothing, with three to six items recommended. |
| title | string | undefined | Optional section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy rendered below the heading. |
| label | string | "Customer results" | Accessible section and scroll-region label when no visible heading is supplied. |
| linkLabel | string | "Read case study" | Visible trailing label on items with a destination. |
| cardMinWidth | number | 280 | Minimum card width in pixels. Finite values clamp from 220 to 360 and non-finite values fall back to 280. |
| hoverLift | number | 6 | Fine-pointer and keyboard-focus lift in pixels. Finite values clamp from 0 to 12 and non-finite values fall back to 6. |
| cardRadius | number | 24 | Card corner radius in pixels. Finite values clamp from 12 to 32 and non-finite values fall back to 24. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Case Study Logo Strip exposes Tier 3 variables for its surface, accent, border, text, muted copy and focus treatment. Use cardMinWidth, hoverLift and cardRadius to tune the actual card geometry and effect without changing preview wording.
<LogoCaseStudyStrip
items={caseStudies}
cardMinWidth={320}
hoverLift={10}
cardRadius={18}
/>
:root {
--logo-case-surface: var(--background);
--logo-case-accent: var(--primary);
--logo-case-border: var(--border);
--logo-case-text: var(--foreground);
--logo-case-muted: var(--muted);
--logo-case-focus: var(--ring);
}Frequently asked questions
- Is Case Study Logo Strip free for commercial use?
- Yes. Case Study Logo Strip is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Case Study Logo Strip accessible and reduced-motion safe?
- Yes. Customer names, metrics and outcomes are real visible text, linked cards are native anchors, unlinked cards are plain articles, and the labelled rail accepts keyboard focus for native scrolling. Reduced motion removes lift and accent movement while keeping every result available.
- How do I customise the case-study cards?
- Set cardMinWidth, hoverLift and cardRadius to change the live geometry and interaction effect. Override the logo-case custom properties on an ancestor to retheme the surface, accent, border, copy and focus treatment.