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

41 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (41 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json

pnpm pnpm dlx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json

bun bunx shadcn@latest add https://shadcn.videojs.org/r/react/registry.json

fetch registry curl -s https://shadcn.videojs.org/r/react/registry.json

Components

41 total

Default Audio Skin 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

Default Live Audio Skin 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

Default Live Video Skin 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

Default Video Skin 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

Video.js Menu Chevron 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

Video.js Utilities 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

Video.js audio styles style

Editable resets and token overrides used only by audio skins.

npx shadcn@latest add https://shadcn.videojs.org/r/react/_style-audio.json

Video.js media theme style

Editable shared media tokens, resets, preferences, and Tailwind compiler integration.

npx shadcn@latest add https://shadcn.videojs.org/r/react/_style-theme.json

Video.js video styles 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 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 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 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 ui

The shared styled button used by media controls.

npx shadcn@latest add https://shadcn.videojs.org/r/react/button.json

Button Tooltip 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 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 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 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 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 ui

The player layout container shared by Skin compositions.

npx shadcn@latest add https://shadcn.videojs.org/r/react/container.json

Error Dialog 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 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 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 ui

A state-aware mute button used by the volume control.

npx shadcn@latest add https://shadcn.videojs.org/r/react/mute-button.json

Picture-in-Picture Button 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 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 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 ui

A submenu for selecting the playback speed.

npx shadcn@latest add https://shadcn.videojs.org/r/react/playback-rate-submenu.json

Poster 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 ui

A submenu for selecting the playback quality.

npx shadcn@latest add https://shadcn.videojs.org/r/react/quality-menu.json

Radio Item 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 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 ui

Visual feedback for forward and backward seek actions.

npx shadcn@latest add https://shadcn.videojs.org/r/react/seek-indicator.json

Settings Menu 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 Parts 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 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 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 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 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 ui

Visual feedback for mute and volume changes.

npx shadcn@latest add https://shadcn.videojs.org/r/react/volume-indicator.json

Volume Control 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 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