OTT Component Library

Overview

The prachyam-sangam OTT monorepo targets five surfaces — web, iOS, Android, Apple TV/Android TV/Roku/Tizen/webOS, and a desktop admin panel — from a single codebase. Without a dedicated component library, each surface would duplicate UI logic and drift from the design system, repeating the same pattern that had broken the previous 18-developer Prachyam codebase. Three off-the-shelf OTT templates from ThemeForest were evaluated and rejected as incomplete or not extensible. A ground-up library was the only path to full control.

Built across 145 commits in 5 days (2025-11-17 to 2025-11-22), the library covers: 273 web components + 53 pages + 23 templates (Next.js 16 + Tailwind CSS v4), 158 mobile components (Expo SDK 54 + React Native 0.81.5 plain StyleSheet), 128 admin organisms (separate Next.js app on port 3001), and a named @ott-platform/db-schema package with 27 Drizzle ORM domain modules. Every component renders with Faker.js-generated mock data, making the showcase page a living visual test suite without Storybook.

The Challenge

A single design system had to drive two fundamentally different rendering engines — Tailwind CSS v4 for Next.js and React Native StyleSheets — while sharing the same design tokens. TV surfaces required keyboard/D-pad focus management that web frameworks provide no native solution for, and third-party TV nav SDKs carry enterprise licensing costs. The admin bundle had to stay completely separate from the viewer-facing bundle to avoid inflating load size with heavy admin dependencies.

Architecture

Web UI uses Next.js 16 App Router with Tailwind CSS v4 CSS custom properties for design tokens and Biome 2.2 for linting. Mobile UI uses Expo SDK 54 with React Native's plain StyleSheet API against a shared theme.ts module exporting the same colour values as JS constants — avoiding NativeWind build complexity on TV targets while keeping visual parity. Admin UI is a standalone second Next.js 16 app on port 3001, keeping the admin bundle completely separate from the viewer-facing app. The database schema (@ott-platform/db-schema) is a versioned package with granular exports by domain so any service can import only the slice it needs. Components follow a strict atomic hierarchy: Atoms → Molecules → Organisms → Templates → Pages, enforced by directory structure with no cross-contamination.

Key Decisions

Separate StyleSheet vs Tailwind CSS. The Tailwind/StyleSheet split avoids NativeWind build issues on TV and desktop targets while keeping the warm terracotta palette (primary: #c96442) as a single source of truth across two source files — one CSS variables file and one colors.ts constant.

TV D-pad navigation without a library. TVNavigationGrid and TVKeyboard handle focus through window.addEventListener("keydown", ...) with grid-math for arrow keys. No spatial navigation library was pulled in, keeping the bundle small and removing a dependency that would need Tizen/webOS-specific shims.

Admin as a standalone Next.js app. Rather than stuffing admin routes into web-ui's route groups, a separate package.json project on port 3001 ensures the admin bundle — with heavy charting, data tables, and Docker API calls — is never shipped to end-users.

Drizzle schema as a named package with granular exports. import { content } from '@ott-platform/db-schema/content' lets any service import exactly its domain slice, preventing schema drift and coupling between API server, admin, and analytics workers.

Results

One design system drives all five OTT surfaces from two token source files. The web UI is 100% complete at 273 components and 53 full page implementations. The TV focus management works on any keydown-capable TV browser with zero external dependencies. The 27-module database schema covers the full platform — auth, content, live streaming, social, billing, analytics, DRM, ads, creator monetisation, i18n, audit, referrals, and events — deployable against PostgreSQL 16 with drizzle-kit migrate. The library replaced three rejected commercial templates at a cost of only Karanveer's time.