Marketing

Case Study Carousel

A 3D stacked case study carousel featuring interactive depth cards, squircle graphics, impact metrics, and glowing pill pagination.

Loading carousel...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add case-study-carousel

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/case-study-carousel.tsx.

3. Install the dependencies:

npm install framer-motion lucide-react clsx tailwind-merge

API Reference

Complete properties reference for the Case Study Carousel. Supports custom 3D visuals, responsive drag physics, metrics grids, and keyboard accessibility.

`CaseStudyCarousel` Props

Prop	Type	Default	Description
`slides`	`CaseStudySlide[]`	`DEFAULT_CASE_STUDIES`	Array of case study slide items (title, description, visual, stats, logo, readMoreLink).
`autoPlay`	`boolean`	`false`	Enables automatic slide cycling.
`autoPlayInterval`	`number`	`6000`	Delay between slide transitions in milliseconds (when autoPlay is true).
`className`	`string`	`—`	Custom classes applied to the outer carousel wrapper.
`cardClassName`	`string`	`—`	Custom classes applied to each slide card.

`CaseStudySlide` Object Schema

Property	Type	Default	Description
`id`	`string \| number`	`required`	Unique identifier for the slide item.
`companyName`	`string`	`—`	Company or project name.
`logo`	`ReactNode`	`—`	Custom React node for the company logo badge.
`title`	`string`	`required`	Main case study heading / headline.
`description`	`string`	`required`	Detailed narrative text / summary.
`readMoreLink`	`string`	`—`	URL destination for the Read More button.
`onReadMore`	`() => void`	`—`	Click callback for custom modal/drawer triggers.
`stats`	`CaseStudyStat[]`	`—`	Array of impact metrics ({ value, label }).
`visual`	`ReactNode`	`<LiquidDropletGraphic />`	Visual node inside the left 3D squircle box.
`visualBg`	`string`	`bg-zinc-950`	Tailwind background classes for the visual squircle.

Examples

Standard Carousel

Default carousel rendering 3D liquid droplet visuals, company tags, impact metrics, and responsive depth cards.

App.tsx

import { CaseStudyCarousel } from "@/components/case-study-carousel";

export default function Demo() {
  return (
    <div className="py-12">
      <CaseStudyCarousel />
    </div>
  );
}

Custom Slides & Autoplay

Pass your own custom case studies with custom metrics and continuous autoplay transitions.

App.tsx

import { CaseStudyCarousel, type CaseStudySlide } from "@/components/case-study-carousel";

const customSlides: CaseStudySlide[] = [
  {
    id: 1,
    companyName: "ACME CORP",
    title: "Enterprise Design System Migration",
    description: "Unified 42 distinct product teams into a single Tailwind CSS token system.",
    readMoreLink: "/case-studies/acme",
    stats: [
      { value: "4.8x", label: "Dev Velocity" },
      { value: "-45%", label: "CSS Bundle" },
      { value: "100%", label: "Tokens Synced" }
    ]
  },
  {
    id: 2,
    companyName: "NEBULA",
    title: "Autonomous Agent Workflow Orchestration",
    description: "Accelerated support ticket resolution with zero downtime deployment pipelines.",
    readMoreLink: "/case-studies/nebula",
    stats: [
      { value: "<200ms", label: "Response" },
      { value: "99.9%", label: "Success Rate" },
      { value: "12M+", label: "Tasks Run" }
    ]
  }
];

export default function CustomDemo() {
  return (
    <CaseStudyCarousel 
      slides={customSlides}
      autoPlay={true}
      autoPlayInterval={5000}
    />
  );
}