Case Study Showcase
Close a page with a case-study carousel: a centred slide between faded neighbours, gradient pagination and a call-to-action pill.
- Dependencies
- No extra packages
- Size
- 526 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/case-study-showcase.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/case-study-showcase.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the case-study-showcase.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CaseStudy[] | — | { company, title, description, href?, stats: { value, label }[], art?, image?, imageAlt? }. Three stats are shown; art is drop | orb | ring | ripple | capsule. |
| eyebrow / eyebrowIndex | string | "Case studies" / "005" | Pill above the heading. An empty index hides the number. |
| heading | string | "What We've Built" | Display heading (h2) and the carousel's accessible label. |
| readMoreLabel | string | "Read more" | Link inside each slide (needs item.href). Empty hides it. |
| ctaLabel / ctaHref | string | "Explore all case studies" / "#" | Black call-to-action pill. Empty label hides it. |
| start | number | 1 | Slide shown first. |
| autoplay / interval | boolean / number | false / 5200 | Pauses on hover, focus, hidden tabs and reduced motion. |
| surface / card / ink | string | "#ffffff" / "#f1f1f1" / "#111111" | Panel, slide and text colours. |
| glow | string | "#7c8cff" | Soft glow under the CTA pill. |
| width | number | 1180 | Maximum width in px. |