---
name: "@videojs"
slug: "videojs"
description: "Video, audio, and live player skins from Video.js, the open source web video player. Add a full skin or individual controls as editable React and Tailwind CSS source."
category: "Theming/styling"
tags: ["ai", "audio", "buttons", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: "videojs"
website: "https://videojs.org/docs/guides/installation/shadcn"
github: "https://github.com/videojs/video.js"
registry: "https://shadcn.videojs.org/r/react/registry.json"
pro: false
pro_url: null
github_stars: 40023
component_count: 41
generated_at: "2026-10-27T06:34:08.542Z"
---

# @videojs

Video, audio, and live player skins from Video.js, the open source web video player. Add a full skin or individual controls as editable React and Tailwind CSS source.

## Links

- Website: https://videojs.org/docs/guides/installation/shadcn
- GitHub: https://github.com/videojs/video.js
- Registry JSON: https://shadcn.videojs.org/r/react/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/videojs
- This file: https://sh4dcn.netlify.app/md/videojs.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json
pnpm dlx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json
bunx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json
# clone the source repo
git clone https://github.com/videojs/video.js.git
# fetch the raw registry index
curl -s https://shadcn.videojs.org/r/react/registry.json
```

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| audio | registry:block | A complete on-demand audio skin with playback, seeking, volume, speed, and feedback controls. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/audio.json` |
| live-audio | registry:block | A complete live audio skin with play, live-edge, volume, error, and keyboard feedback controls. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/live-audio.json` |
| live-video | registry:block | A complete live video skin with live-edge, captions, remote playback, feedback, and input controls. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/live-video.json` |
| video | registry:block | A complete on-demand video skin with responsive controls, settings, feedback, and input controls. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/video.json` |
| _menu-chevron | registry:lib | Private menu direction indicator shared by editable Video.js menu components. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/_menu-chevron.json` |
| _resolve-class-name | registry:lib | Merges and resolves state-aware class names used by editable Video.js React components. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/_resolve-class-name.json` |
| _style-audio | registry:style | Editable resets and token overrides used only by audio skins. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/_style-audio.json` |
| _style-theme | registry:style | Editable shared media tokens, resets, preferences, and Tailwind compiler integration. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/_style-theme.json` |
| _style-video | registry:style | Editable resets and token overrides used only by video skins. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/_style-video.json` |
| airplay-button | registry:ui | A state-aware button that starts and stops AirPlay playback. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/airplay-button.json` |
| audio-track-menu | registry:ui | A submenu for selecting an available audio track. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/audio-track-menu.json` |
| buffering-indicator | registry:ui | A delayed spinner displayed while media is waiting for data. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/buffering-indicator.json` |
| button | registry:ui | The shared styled button used by media controls. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/button.json` |
| button-tooltip | registry:ui | A tooltip that wraps a control button and shows its label and keyboard shortcut. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/button-tooltip.json` |
| captions-button | registry:ui | A state-aware button that toggles captions and subtitles. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/captions-button.json` |
| captions-menu | registry:ui | A captions button and popup for selecting a text track. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/captions-menu.json` |
| captions-submenu | registry:ui | A submenu for selecting captions or turning them off. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/captions-submenu.json` |
| cast-button | registry:ui | A state-aware button that starts and stops Google Cast playback. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/cast-button.json` |
| container | registry:ui | The player layout container shared by Skin compositions. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/container.json` |
| error-dialog | registry:ui | An alert dialog that presents and dismisses playback errors. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/error-dialog.json` |
| fullscreen-button | registry:ui | A button that enters and exits fullscreen with state-aware icons. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/fullscreen-button.json` |
| live-button | registry:ui | Shows live-edge status and seeks playback back to the live point when activated. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/live-button.json` |
| mute-button | registry:ui | A state-aware mute button used by the volume control. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/mute-button.json` |
| pip-button | registry:ui | A state-aware button that enters and exits picture-in-picture. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/pip-button.json` |
| play-button | registry:ui | A three-state button that plays, pauses, or restarts media with matching icons. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/play-button.json` |
| playback-rate-button | registry:ui | Shows the current speed and cycles through available playback rates. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/playback-rate-button.json` |
| playback-rate-submenu | registry:ui | A submenu for selecting the playback speed. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/playback-rate-submenu.json` |
| poster | registry:ui | The video poster and its presentation styling shared by Skin compositions. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/poster.json` |
| quality-menu | registry:ui | A submenu for selecting the playback quality. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/quality-menu.json` |
| radio-item | registry:ui | A selectable menu item with an active-state indicator. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/radio-item.json` |
| seek-button | registry:ui | A button that skips playback forward or backward with a direction-aware icon and value. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/seek-button.json` |
| seek-indicator | registry:ui | Visual feedback for forward and backward seek actions. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/seek-indicator.json` |
| settings-menu | registry:ui | A settings button and popup for composing playback option submenus. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/settings-menu.json` |
| slider | registry:ui | Shared styled parts for slider tracks, progress layers, and thumbs. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/slider.json` |
| status-announcer | registry:ui | A polite live region that announces media state changes. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/status-announcer.json` |
| status-indicator | registry:ui | Visual feedback for captions, fullscreen, picture-in-picture, and playback actions. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/status-indicator.json` |
| time-slider | registry:ui | A playback timeline for seeking, with current and buffered progress plus time and thumbnail previews. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/time-slider.json` |
| title | registry:ui | The media title, displayed above the video while controls are visible. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/title.json` |
| volume-indicator | registry:ui | Visual feedback for mute and volume changes. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/volume-indicator.json` |
| volume-popover | registry:ui | A mute toggle with a vertical slider for adjusting playback volume in a popover. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/volume-popover.json` |
| volume-slider | registry:ui | A horizontal or vertical slider for adjusting playback volume by dragging, using the keyboard, or scrolling. | `npx shadcn@latest add https://shadcn.videojs.org/r/react/volume-slider.json` |

## For AI agents

```text
You are adding components from @videojs to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/videojs.md) for the component list.
2. Fetch the machine-readable index: https://shadcn.videojs.org/r/react/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: videojs).
```