Getting started

Swap <video> for <VideoPlayer>. Same props and calmer controls. The shadcn CLI puts the source in your repo, so you own every line.

terminal

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

Video

Every attribute you would put on a native video element works unchanged. Controls fade away while it plays and return the moment you move.

tsx

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

<VideoPlayer
  src="/clip.mp4"
  poster="/clip.jpg"
  tracks={[{ src: "/clip.en.vtt", label: "English", srcLang: "en" }]}
  persistKey="bobine"
/>

Audio

Built from the same parts and styled with your theme tokens, so it matches your app in light and dark mode.

Morning DriftDemo track

0:00

terminal

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

tsx

import { AudioPlayer } from "@/components/ui/audio-player"

<AudioPlayer src="/episode.mp3" title="Episode 12" description="Field notes" />

Or install the package

Prefer a dependency over owning the source? The same components ship as bobine, with a framework-agnostic core.

terminal

$ pnpm add bobine

tsx

/* globals.css */
@import "tailwindcss";
@import "bobine/styles.css";

import { VideoPlayer, AudioPlayer } from "bobine"
import { hlsLoader } from "bobine/hls"
import { createMediaStore } from "bobine/core"

Use with agents

Install the bobine skill so your coding agent knows the components, props and pitfalls. The full docs are also plain text at /llms-full.txt.

terminal

$ npx skills add SanyamPunia/bobine

prompt

Add bobine media players to this React project.

1. Read https://bobine.fyi/llms-full.txt for the full bobine docs before you change code.
2. Install the video player with the shadcn CLI:
   npx shadcn@latest add https://bobine.fyi/r/video-player.json
   For audio, also run: npx shadcn@latest add https://bobine.fyi/r/audio-player.json
   For HLS streams, also run: npx shadcn@latest add https://bobine.fyi/r/media-hls.json
3. Replace each <video controls> element with <VideoPlayer> from "@/components/ui/video-player". Keep src, poster, tracks and the other native props. Remove the controls attribute.
4. Replace each <audio controls> element with <AudioPlayer> from "@/components/ui/audio-player" in the same way.
5. For .m3u8 sources, pass loader={hlsLoader} from "@/lib/media-hls" in a client component.
6. Do not restyle the installed components unless I ask. They use the project's shadcn theme tokens.