Reels

UI-only vertical short-form video reels. You handle logic, API calls, and state — same approach as shadcn Button.

Installation

Install via shadcn CLI. Requires zezo-drawer2, @zezosoft/react-player, and react-loading-skeleton.

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

Overview

Reels are UI-only. You provide data, manage likes/shares, and handle locked content. No built-in API calls or auth logic.

Component	Role
ReelsContainer	Main layout: scroll feed, sidebars, mobile drawer
ReelsSkeleton	Loading placeholder
ReelItem	Composed item (video, left/right panels)

ReelsContainer Props

All logic is via callbacks. Parent manages state.

Prop	Type	Description
data	ReelSeriesData[]	Reel series with episodes
autoScroll	boolean	Auto next when video ends
onEpisodeSelect	(s, e) => void	Episode selected
onLockedEpisodeClick	(s, e) => void	Locked episode clicked (redirect, toast)
onLike	(seriesId) => void	Like action — you update state/API
onShare	(seriesId, title) => void	Share — open modal, copy link, etc.

Data Types

interface ReelSeriesData {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
  likes: number;
  isLiked: boolean;
  episodes: Episode[];
  channelLogo?: string;
}

interface Episode {
  episodeId: string;
  episodeNumber: number;
  duration: string;
  videoUrl: string;
  isLocked?: boolean;  // Shows lock overlay, you handle unlock
  subtitles?: { url?: string; label?: string; lang?: string }[];
}

Dummy Data & Usage

import { ReelsContainer, ReelsSkeleton } from "@/components/ui/zezo-ui/reels";
import { DUMMY_REELS_DATA } from "@/components/ui/zezo-ui/reels/dummy-data";

// With your own data
<ReelsContainer
  data={reelsData}
  autoScroll
  onEpisodeSelect={(s, e) => console.log(s, e)}
  onLockedEpisodeClick={() => router.push("/login")}
  onLike={async (id) => {
    await likeApi(id);
    setLiked((p) => ({ ...p, [id]: !p[id] }));
  }}
  onShare={(id, title) => {
    navigator.clipboard.writeText(window.location.href);
    toast.success("Copied!");
  }}
/>

// With dummy data
<ReelsContainer data={DUMMY_REELS_DATA} />