# bobine

> 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.

```bash
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.

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

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

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

## What you get

- **Native props**: Every attribute you put on a video or audio element works unchanged.
- **Source you own**: The shadcn CLI copies the components into your repo. Edit any line.
- **Keyboard first**: Space, J, K, L, arrows and more, scoped to the focused player.
- **Adaptive streams**: Add the HLS loader. hls.js loads only when an .m3u8 source appears.
- **Your theme**: Styled with your tokens, so it matches your app in light and dark.
- **Composable**: Unstyled parts and a selector hook for when the defaults do not fit.

## Audio too

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

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

## Start in the docs

Install commands, composition, streaming, every part and every shortcut. Read [the docs](https://bobine.fyi/docs.md).