A React video player you can theme to match your product.

the real glass UI, playing a public Mux asset. press space to play, f for fullscreen.

what you get

Themeable glass chrome

one accentColor prop drives the scrubber, menus, and ranges. every surface is a CSS custom property on the .kino root, so you can retheme corners, blur, and color without forking.

Pluggable providers

the same chrome sits on any streaming engine through one typed provider contract. the Mux provider is built on the mux-video custom element.

Keyboard-first

space, arrows, number-seek, captions, speed, and fullscreen. the shortcuts ignore inputs and textareas, so they never fight a focused field.

Capability-gated controls

quality, picture-in-picture, captions, and fullscreen hide themselves when the provider or platform cannot support them, instead of showing a dead button.

drop it in

pnpm add @karnstack/kino

import { MuxPlayer } from "@karnstack/kino/mux"
import "@karnstack/kino/styles.css"

<MuxPlayer
  playbackId="your-playback-id"
  accentColor="oklch(50.8% 0.118 165.612)"
/>

kino is auth-agnostic. for signed playback you mint the tokens server-side and pass them through the tokens prop; for public assets you omit them. React 19 is the only peer dependency.