Installation

PlayerKit is distributed as three packages on npm. For most React projects, you only need @playerkit/react — it bundles the core engine and pulls in the UI stylesheets automatically.

React Projects (Recommended)

npm install @playerkit/react @playerkit/core @playerkit/ui

pnpm add @playerkit/react @playerkit/core @playerkit/ui

yarn add @playerkit/react @playerkit/core @playerkit/ui

bun add @playerkit/react @playerkit/core @playerkit/ui

This installs all three packages. @playerkit/core and @playerkit/ui are peer dependencies of @playerkit/react, so you need them listed explicitly in package.json.

Core Only (Vanilla JS / Other Frameworks)

If you are using Vue, Svelte, Angular, or plain JavaScript and don't need the React components, install only the headless engine:

npm install @playerkit/core

pnpm add @playerkit/core

yarn add @playerkit/core

bun add @playerkit/core

The core package has no framework dependencies — it works anywhere JavaScript runs.

Peer Requirements

CSS Stylesheets

Starting with v0.0.3, player components automatically import the CSS they need. No manual stylesheet imports are required in most setups.

Automatic (Default)

// CSS is automatically loaded — nothing else needed
import { HlsPlayer } from "@playerkit/react";

Each component imports only what it needs:

Manual (Advanced)

If your bundler doesn't support CSS side-effects or you're building custom controls, import stylesheets manually:

// Core layout, control bar, settings, error/buffering overlays
import "@playerkit/ui/styles/common.css";

// Pick the one that matches your player variant:
import "@playerkit/ui/styles/hls.css";     // for <HlsPlayer>
import "@playerkit/ui/styles/youtube.css"; // for <YoutubePlayer>
import "@playerkit/ui/styles/mp4.css";     // for <Mp4Player>

TypeScript

PlayerKit is written in TypeScript and ships full type declarations. No @types/* packages are needed.

import type {
  PlayerProps,
  HlsPlayerProps,
  PlayerControls,
  TokenFetcher,
  ThemeVars,
} from "@playerkit/react";

Bundler Support

PlayerKit is tested with the following bundlers:

• Vite ✅
• Next.js (App Router + Pages Router) ✅
• webpack 5 ✅
• esbuild ✅
• Rollup ✅

Next Steps