react-video-kit

Features

• Composable primitives for building custom video UIs
• Declarative sources and tracks
• Imperative ref API for programmatic control
• Accessible with ARIA labels and keyboard support
• SSR-safe for Next.js and other frameworks
• Fully typed with TypeScript
• Isolated styling with Tailwind CSS (rv- prefix), compatible with Tailwind v3 and v4

Installation

bun add react-video-kit
# or
pnpm install react-video-kit
# or
npm add react-video-kit
# or
yarn add react-video-kit

Styling and Tailwind

• The core package ships precompiled CSS with an rv- prefix for all utilities.
• No Tailwind preflight/base is injected by the library, avoiding global resets leaking into apps.
• Works with Tailwind v3, v4, or without Tailwind.

For local development of the core package, CSS is built automatically by pnpm build and watched in pnpm dev.

Quick Start

import{Video}from"react-video-kit";exportdefaultfunctionApp(){return(<Video.Rootsrc="https://example.com/video.mp4"><Video.Media/><Video.Center><Video.PlayPause/></Video.Center></Video.Root>);}

Full Example

import{Video}from"react-video-kit";exportdefaultfunctionPlayer(){return(<Video.Rootsrc="https://example.com/video.mp4"title="My Video"subtitle="Video description"><Video.Media/><Video.Backdrop/><Video.Header><divclassName="rv-w-full rv-flex"><Video.FullscreenToggle/><Video.PipToggle/></div><divclassName="rv-w-full rv-flex rv-justify-end rv-items-center rv-h-fit"><Video.Volume.Button/><Video.Volume.Slider/></div></Video.Header><Video.Center><Video.SeekBackseconds={10}/><Video.PlayPause/><Video.SeekForwardseconds={10}/><Video.Loading/></Video.Center><Video.Footer><divclassName="rv-flex rv-flex-col"><Video.Subtitle/><Video.Title/></div><Video.Timeline/><divclassName="rv-flex rv-justify-between rv-w-full"><Video.Time.Current/><Video.Time.Remainingnegative/></div></Video.Footer></Video.Root>);}

Documentation

Full documentation is available in the core package README.

Demo

Visit https://react-vide-kit.chaqchase.com to see live demos.

License

Apache-2.0

Author

Mohamed Achaq (@chaqchase)