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

## Install

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

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

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

```bash
npx skills add SanyamPunia/bobine
```

Or paste this prompt into an agent to install bobine in a project.

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

## More docs

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