Slider Components Documentation

A set of content hero sliders for OTT/media applications. Each slider serves a different use case and design pattern.

Installation

Use shadcn CLI to add slider components. All sliders expect IContentData[] from @zezosoft/zezo-ott-api-client. Run the command for the slider you need:

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-slider.json

Overview

Slider	Use Case	Key Features
Slider	Basic hero carousel	Image-only, framer-motion, drag support, Watch Now CTA
SliderV1	Full-featured homepage hero	Trailer auto-play, thumbnail strip, responsive (desktop + mobile)
SliderV2	Featured content showcase	Multi-card layout, trailer video, theme colors, intersection observer
SliderV3	Rich hero with actions	Native video trailer, FavoriteButton, dual CTAs, dot indicators
MainHomeTabAndMobileSlider	Mobile-only carousel	Swiper-based, used inside V1/V3 on small screens

1. Slider (Basic)

Simple hero carousel with minimal UI. Best for image-only content without trailers.

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-slider.json

Props

Prop	Type	Required	Description
data	IContentData[]	Yes	Content items to display
onWatchNow	(item) => void	No	Callback when user clicks "Watch Now"

Usage

import Slider from "@/components/ui/zezo-ui/slider/Slider";

<Slider
  data={contentData}
  onWatchNow={(item) => router.push(`/details/${item.type}/${item.slug}`)}
/>

2. SliderV1

Full-featured homepage hero. Desktop: full hero with thumbnails; Mobile: MainHomeTabAndMobileSlider.

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-slider-v1.json

Props

Prop	Type	Default	Description
data	IContentData[]	[]	Content items
forceDesktopForPreview	boolean	false	Always show desktop layout (useful for docs)

Usage

import SliderV1 from "@/components/ui/zezo-ui/slider/SliderV1";

<SliderV1 data={featuredContent} />

// For docs/preview - force desktop layout:
<SliderV1 data={featuredContent} forceDesktopForPreview />

3. SliderV2

Featured content row with side-by-side cards. Pauses when off-screen (intersection observer).

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-slider-v2.json

Props

Prop	Type	Required	Description
data	IContentData[]	Yes	Content items
onWatchNow	(item) => void	No	Callback when user clicks "Watch Now"

Usage

import SliderV2 from "@/components/ui/zezo-ui/slider/SliderV2";

<SliderV2
  data={featuredContent}
  onWatchNow={(item) => handleWatch(item)}
/>

4. SliderV3

Rich hero with FavoriteButton, dual CTAs (Watch Now + More details), and dot indicators.

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-slider-v3.json

Props

Prop	Type	Default	Description
data	IContentData[]	[]	Content items
session	IWhoami \| null	-	User session (for FavoriteButton)
forceDesktopForPreview	boolean	false	Force desktop layout for docs

Usage

import SliderV3 from "@/components/ui/zezo-ui/slider/SliderV3";

<SliderV3 data={featuredContent} session={userSession} />

5. MainHomeTabAndMobileSlider

Mobile-only Swiper-based carousel. Used internally by SliderV1 and SliderV3.

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-mobile-slider.json

Props

Prop	Type	Description
data	IContentData[] \| null	Content items

Usage

import MainHomeTabAndMobileSlider from "@/components/ui/zezo-ui/slider/MainHomeTabAndMobileSlider";

<MainHomeTabAndMobileSlider data={contentData} />

Quick Comparison

Feature	Slider	SliderV1	SliderV2	SliderV3
Trailer support	No	Yes (VideoPlayer)	Yes (VideoPlayer)	Yes (native video)
Mobile variant	Same	MainHomeTabAndMobileSlider	Same	MainHomeTabAndMobileSlider
Thumbnail strip	No	Yes	No	No
FavoriteButton	No	No	No	Yes
Drag/swipe	Yes	No	No	No
Height	60vh	100vh - header	60vh	80vh