The media player your browser should have shipped.

Drop-in video and audio players for React. Same props as the native elements, calmer controls, and source code that lives in your repo.

terminal

$ npx shadcn@latest add https://bobine.fyi/r/video-player.json

Swap one tag

Keep your sources, posters and caption tracks. Drop the controls attribute and change the element name.

before.tsx

<video src="/clip.mp4" poster="/clip.jpg" controls />

after.tsx

import { VideoPlayer } from "@/components/ui/video-player"

<VideoPlayer src="/clip.mp4" poster="/clip.jpg" />

What the players do without extra setup.

Native propsEvery attribute you put on a video or audio element works unchanged.
Source you ownThe shadcn CLI copies the components into your repo. Edit any line.
Keyboard firstSpace, J, K, L, arrows and more, scoped to the focused player.
Adaptive streamsAdd the HLS loader. hls.js loads only when an .m3u8 source appears.
Your themeStyled with your tokens, so it matches your app in light and dark.
ComposableUnstyled parts and a selector hook for when the defaults do not fit.

The audio player is built from the same parts, so both feel like one set.

Morning DriftDemo track

0:00

Install commands, composition, streaming, every part and every shortcut.