Skip to Content
WebGetting Started

⚡Kickstart Your OTT App with Zezo UI Kit

Build sleek, high-performance OTT platforms effortlessly using the Zezo OTT UI Kit — a customizable React component library optimized for streaming apps.

Whether you’re using React or Next.js, this guide helps you get started with project setup, installing dependencies, and building modern UIs fast.

✅ Supported Environments

FrameworkSupport
Next.js✅ Fully Supported
React✅ Fully Supported

⚠️ Note: Optimized for Next.js 13+ (App Router) and React 18+. Limited support for legacy setups.

1️⃣ Choose Your Setup

Choose a framework to begin:

🚀 Next.js Setup

Terminal
npx create-next-app@latest

On installation, you’ll see the following prompts:

Terminal
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

After responding to the prompts, create-next-app will automatically create a new directory with the name of your project and install the required dependencies.

⚠️ Important:
Make sure to select Yes for TypeScript when prompted. This ensures that you get the best tooling support, automatic type-checking, and a smoother, error-free development experience.

Step 2: Navigate into your project directory

Terminal
cd my-app

2️⃣ Install Zezo UI Kit

Install the Zezo OTT React UI Kit to use ready-made OTT components like Header, ContentDetails, FavoriteButton, and more.

Terminal
pnpm add @zezosoft/zezo-ott-react-ui-kit

3️⃣ Setup React Query

Zezo UI Kit relies on React Query for efficient data fetching, caching, and state management. Follow these steps to set it up globally in your app.

📦 Install React Query

Terminal
pnpm add @tanstack/react-query

🔧 Create a React Query Provider

Create a global provider to wrap your entire app and enable caching + devtools.

src/Provider.tsx
"use client";
 
import { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
const queryClient = new QueryClient();
 
export function ReactQueryProvider({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

🧩 Usage in App Layout

Wrap your entire application with the ReactQueryProvider component to ensure global caching and mutation handling using React Query.

📂 File: app/layout.tsx

Update your root layout to include the provider:

app/layout.tsx
import { ReactQueryProvider } from "./providers";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ReactQueryProvider>
          {/* ✅ Global Providers */}
          {/* 🧩 Add your Header, Footer, Toast, etc. here */}
          {children}
        </ReactQueryProvider>
      </body>
    </html>
  );
}

4️⃣ Add Zezo Header

The Header component renders your top navigation bar with categories, settings, and user profile info.

✅ Basic Example

components/ZezoHeader.tsx
"use client";
import { Header as ZezoOttHeader } from "@zezosoft/zezo-ott-react-ui-kit";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import toast from "react-hot-toast";
import { zezoClient } from "@/lib/zezoClient";
 
interface HeaderProps {
  settings: IWebSetting | null;
  categories: IGetCategoriesData[] | null;
  whoami: IWhoami | null;
}
 
const Header: React.FC<HeaderProps> = ({
  categories = [],
  settings,
  whoami,
}) => {
  const router = useRouter();
  const [search, setSearch] = useState("");
 
  const logoutMutation = useMutation({
    mutationFn: zezoClient().auth.logout,
    onSuccess: () => router.push("/"),
    onError: () => toast.error("Logout failed"),
  });
 
  return (
    <ZezoOttHeader
      logo={{
        src: settings?.logo || "https://default-logo.png",
        alt: "Zezo OTT",
        href: "/",
        linkComponent: Link,
      }}
      menu={{
        menu: categories,
        menuShowLimit: 4,
      }}
      search={{
        value: search,
        onChange: (e) => {
          setSearch(e.target.value);
          router.replace(`/search?q=${encodeURIComponent(e.target.value)}`);
        },
      }}
      profile={{ href: "/phone-login" }}
      user={whoami}
      onLogout={() => logoutMutation.mutate()}
    />
  );
};
 
export default Header;

📋 Header Props

PropDescription
logoLogo configuration including image URL, alt text, and logout handling
menuCategory menu options like visible count, slug prefix, and category list
searchSearch input settings – placeholder, value, and input handler
profileProfile navigation setup (e.g., avatar dropdown or profile page link)
userCurrent user details (e.g., name, avatar, email)
onLogoutFunction to call when the logout button is clicked

ℹ️ You can also use linkComponent to customize routing (next/link, react-router-dom, etc.)

5️⃣ Run Your App

Terminal
pnpm dev

This will start the development server. You can now open your browser and go to http://localhost:3000  to see your app live!

💡 Tips for Success

  • Use TypeScript for better tooling and developer experience.
  • Enable App Router if you’re using Next.js 13+.
  • Tailwind CSS works perfectly with the Zezo UI Kit.
  • Customize components using className, slots, and props.
  • Check your bundle size and optimize for production.

📚 Explore More

✍️ Made with ❤️ by Naresh Desai

Last updated on
PlayerAPI Setup