Skip to content

GuideGetting Started

Shadcn Installation Guide

Add editable React or HTML skin source with the Shadcn registry

Use Shadcn to add a Video.js skin's components, layout, styles, and interactions as React or HTML custom-element source. The CLI copies the files into your app so you can review and change them like any other source code.

AI Quickstart

Paste this prompt into your coding agent:

Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --method shadcn --framework react` for React, or `npx @videojs/cli agents init --method shadcn --framework html` for plain HTML. The command prints version-matched choices and instructions without changing files.

Choose your framework

Choose the JavaScript framework for your project.

ReactComponents and hooks for React 19HTMLCustom elements for any stack

Choose your app

Choose the app environment that controls the setup commands and file locations below.

Next.jsFull-stack React with App RouterViteFast app and development serverTanStack StartFull-stack React with TanStack RouterReact RouterReact Router framework modeAstroContent-focused sites with islandsLaravelLaravel app with Vite assets
ViteFast app and development serverAstroContent-focused sites with islandsLaravelLaravel app with Vite assets

Choose your use case

Choose the ready-made player that is closest to what you are building. The Shadcn registry does not currently provide the background video skin as source.

VideoOn-demand video with full controlsAudioPodcasts, music, and audio-only playbackLive VideoStreams with a Live button, no durationLive AudioLive radio and audio streams

Choose your skin

Choose the skin source the CLI will add to your project. You can edit its components, layout, styles, and interactions.

DefaultComplete controls with a modern, frosted lookMinimalThe same controls with clean, solid surfaces
0:00
Video preset with the default skin, playing our demo media.

Choose your media

Choose what the player will play. If that source needs a playback adapter, the installation steps include it.

Optional. The URL also ends up in your generated code.

HTML5 VideoMP4, WebM, and other file URLsHLSAdaptive .m3u8 streams via hls.jsDASHAdaptive .mpd streams via dash.jsMuxMux playback IDs with Mux Data selected by defaultVimeoVimeo videos and private linksYouTubeYouTube videos and shortsCloudflare StreamCloudflare Stream videosTikTokTikTok videosTwitchTwitch channels, videos, and clips
Drop a video to host it for free on MuxWe transcode it into an HLS stream and set it as your source above.orPowered by

Choose your extensions

Add optional behavior to the player. Only extensions that work with your player and media source appear below.

No optional extensions apply to these selections.

Choose how to install

Choose from the installation options available for your selections.

Choose your styling

Choose how the skin source is styled. New Shadcn apps include Tailwind CSS. For an existing app, choose Tailwind CSS only when the app already uses it.

Vanilla CSSPlain stylesheets for apps without TailwindTailwind CSSUtility classes, included in new Shadcn apps

Prepare your app

Choose whether to create the selected app setup or add editable skin source to a project you already have.

New projectCreate a new appExisting projectAdd to an existing app
pnpm dlx shadcn@latest init --template next --no-monorepo --base base --preset nova --name videojs-app --yes
cd videojs-app

Configure Shadcn

If components.json already exists, keep its aliases and skip this section. Otherwise, complete the setup below. The registry uses aliases.components for skin source. In a monorepo, run commands from the app workspace or pass --cwd <path>.

pnpm dlx shadcn@latest init --base base --preset nova --yes

If components.json already exists, keep its aliases and skip this section. Otherwise, complete the setup below. The registry uses aliases.components for skin source. In a monorepo, run commands from the app workspace or pass --cwd <path>.

  1. Configure tsconfig.json

    {
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

  2. Configure vite.config.ts

    import path from 'node:path';
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(import.meta.dirname, './src'),
    },
  },
});

  3. Create components.json

    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {}
}

Add the skin source

Configure @videojs, then add the selected skin source. Shadcn skips existing namespaces, so when you change styling or theme, replace the existing @videojs URL in components.json with the URL shown in the first step. Adding the skin overwrites an existing Video.js skin so the selected catalog applies completely. Review and remove obsolete Video.js style files left by an earlier catalog. For HTML source, repeat the media replacement below after an overwrite.

  1. Add the Video.js Registry

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

  2. Add the skin source

    pnpm dlx shadcn@latest add @videojs/video --overwrite --yes

  1. Create components.json (optional)

    pnpm dlx shadcn@latest init --base base --preset nova --yes

  2. Add the Video.js Registry

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

  3. Add the skin source

    pnpm dlx shadcn@latest add @videojs/video --overwrite --yes

The files are added under <components alias>/videojs/<preset>. The registry item also installs @videojs/react.

  1. Add the Video.js Registry

    pnpm dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json

  2. Add the skin source

    pnpm dlx shadcn@latest add @videojs/video --overwrite --yes

The files are added under <components alias>/videojs/<preset>. The registry item also installs @videojs/html.

Add your player

Add the player to the file shown for your selected app setup. It imports the player and media from the package, then imports the selected skin from your project.

import { VideoPlayer, Video } from '@videojs/react/video';
import { VideoSkin } from '@/components/videojs/video/skin';

export default function Page() {
  return (
    <VideoPlayer>
      <VideoSkin className="aspect-video w-full">
        <Video src={"https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"} playsInline />
      </VideoSkin>
    </VideoPlayer>
  );
}

The steps below add HTML skin source to a plain HTML app. For Vue or Svelte, use the packaged skins in the Vue guide or Svelte guide.

  1. Update the skin markup

    The skin path below assumes the @/components components alias. If aliases.components in components.json differs, the skin is under that alias's directory instead.

    In src/components/videojs/video/skin.html, replace the “Add a compatible media element here” comment with:

    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>

    Then size the video on the skin's root container: replace its opening <media-container with:

    <media-container style="display: block; width: 100%; aspect-ratio: 16 / 9;"

  2. Register custom elements

    Create src/player.ts and import the player, media, and installed skin:

    import '@videojs/html/video/player';
import '@/components/videojs/video/skin';

    Use the aliases.components value from components.json in the skin import when it differs from @/components.

  3. Add the player to your page

    Paste the updated skin markup inside the player, then load the entry module:

    <video-player>
  <!-- Paste the contents of src/components/videojs/video/skin.html here. -->
</video-player>

<script type="module" src="/src/player.ts"></script>

Run your app

Start the app and verify that the selected media plays.

pnpm dev

That’s it! You now have a working Video.js player whose skin source lives in your project.

Change the skin source

Start in <components alias>/videojs/<preset>/skin.tsx. Follow the Customize skins guide for the files that control layout, colors, controls, and interactions.

Start in <components alias>/videojs/<preset>/skin.html. Follow the Customize skins guide for the files that control layout, colors, controls, and interactions.

Choose what to do next

Customize

Customize skin source
Change the installed layout, controls, styles, and interactions
UI components
Explore the building blocks used by skins and custom controls
Build your own component
Connect custom UI to player state and actions

Deploy

Browser support
Check supported browsers and rendering environments
TypeScript
Configure TypeScript for Video.js packages
Bundlers
Check bundler compatibility
Content Security Policy
Configure Content Security Policy for your player

Customize

Customize skin source
Change the installed layout, controls, styles, and interactions
UI components
Explore the building blocks used by skins and custom controls
Build your own component
Connect custom UI to player state and actions

Deploy

Browser support
Check supported browsers and rendering environments
TypeScript
Configure TypeScript for Video.js packages
Bundlers
Check bundler compatibility
Content Security Policy
Configure Content Security Policy for your player