# bobine

> Drop-in video and audio players for React, distributed as a shadcn registry and as the bobine npm package.

Use bobine when a React app needs a video or audio player that keeps the native element's props, matches the app's shadcn theme, and lives in the repo as editable source. It covers MP4, WebM, MP3, captions (WebVTT), picture-in-picture, fullscreen, keyboard shortcuts and HLS streams through hls.js.

Do not use bobine for a non-React app, for DRM-protected streams (bobine sets up no DRM), or for a video editor or timeline. Use the framework-agnostic core in bobine/core when you need the player state without React.

## Docs

- [Getting started](https://bobine.fyi/docs.md): Install bobine and swap your first video or audio element.
- [Guides](https://bobine.fyi/docs/guides.md): Compose your own player, play adaptive streams, write a loader and theme the controls.
- [Reference](https://bobine.fyi/docs/reference.md): Every prop, part and keyboard shortcut.
- [Full docs in one file](https://bobine.fyi/llms-full.txt): every page above, for loading into context
- [Overview](https://bobine.fyi/index.md): what bobine is and what it does
- [Examples](https://bobine.fyi/docs/examples.md): recipes for common jobs, each with its code

## Registry

- [registry.json](https://bobine.fyi/r/registry.json): every installable item
- [video-player](https://bobine.fyi/r/video-player.json): the drop-in video player
- [audio-player](https://bobine.fyi/r/audio-player.json): the audio player
- [media](https://bobine.fyi/r/media.json): unstyled primitives to compose your own
- [media-hls](https://bobine.fyi/r/media-hls.json): the HLS loader

## Optional

- [Agent skill](https://github.com/SanyamPunia/bobine/tree/main/skills/bobine): install with `npx skills add SanyamPunia/bobine`
- [npm package](https://www.npmjs.com/package/bobine): bobine, the same components as a dependency
- [Sitemap](https://bobine.fyi/sitemap.xml)