v10/site/src/content/docs/concepts/_skins.mdx

---
title: Skins
description: Packaged sets of video player UI components and styles that you can customize or replace
---

import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import { FrostedSkinDemo } from '@/examples/react/FrostedSkin/FrostedSkinDemo';
import { MinimalSkinDemo } from '@/examples/react/MinimalSkin/MinimalSkinDemo';
import ContentWidth from '@/components/frames/ContentWidth.astro';
import DocsLink from '@/components/docs/DocsLink.astro';

In Video.js v10, skins are **complete, packaged player designs** that include both UI components and their styles. This is a significant change from v8, where skins were purely CSS themes applied to a fixed component structure.

## What's different in v10?

### Video.js v8 skins
- CSS-only themes
- Applied to a fixed component structure
- Limited customization without JavaScript

### Video.js v10 skins
- **UI components + styles packaged together**
- Each skin can have completely different components
- Can address entirely different use cases
- Only include the components they need

## Built-in skins

### Frosted

A modern, glassy design with backdrop blur effects and polished interactions.

<FrameworkCase frameworks={["react"]}>
```tsx
import { createPlayer, Poster } from '@videojs/react';
import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

const Player = createPlayer({ features: videoFeatures });

export function VideoPlayer() {
  return (
    <Player.Provider>
      <VideoSkin className="w-full aspect-video">
        <Video src="video.mp4" />
        <Poster src="poster.webp" />
      </VideoSkin>
    </Player.Provider>
  );
}
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<video-provider>
  <media-skin-frosted>
    <video slot="media" src="video.mp4"></video>
  </media-skin-frosted>
</video-provider>
```
</FrameworkCase>

<ContentWidth class='relative z-20'>
  <FrostedSkinDemo client:visible />
</ContentWidth>

### Minimal

A clean, straightforward design that focuses on simplicity and clarity.

<FrameworkCase frameworks={["react"]}>
```tsx
import { createPlayer, Poster } from '@videojs/react';
import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
import '@videojs/react/video/minimal-skin.css';

const Player = createPlayer({ features: videoFeatures });

export function VideoPlayer() {
  return (
    <Player.Provider>
      <MinimalVideoSkin className="w-full aspect-video">
        <Video src="video.mp4" />
        <Poster src="poster.webp" />
      </MinimalVideoSkin>
    </Player.Provider>
  );
}
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<video-provider>
  <media-skin-minimal>
    <video slot="media" src="video.mp4"></video>
  </media-skin-minimal>
</video-provider>
```
</FrameworkCase>

<ContentWidth class='relative z-20'>
  <MinimalSkinDemo client:visible />
</ContentWidth>

## Customizing skins

Skins are designed to be ejected and modified for your specific needs.

Ready to make it your own? <DocsLink slug="how-to/customize-skins">Learn how to customize a skin →</DocsLink>

## Building your own skin

A skin is simply a component that:
<FrameworkCase frameworks={["react"]}>
1. Wraps content in a `MediaContainer`
2. Includes a `children` prop (for the media renderer)
3. Arranges UI components as desired
4. Provides styles for those components
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
1. Wraps content in a `media-container`
2. Includes a `<slot>` element (for the media renderer)
3. Arranges UI components as desired
4. Provides styles for those components
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx
import { MediaContainer, PlayButton, TimeSlider } from '@videojs/react-preview';

export function CustomSkin({ children, className }) {
  return (
    <MediaContainer className={className}>
      {children}
      <div className="controls">
        <PlayButton />
        <TimeSlider.Root>
          <TimeSlider.Track>
            <TimeSlider.Progress />
          </TimeSlider.Track>
          <TimeSlider.Thumb />
        </TimeSlider.Root>
      </div>
    </MediaContainer>
  );
}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html
<video-provider>
  <media-container class="custom-skin">
    <slot></slot>
    <div class="controls">
      <media-play-button></media-play-button>
      <media-time-slider>
        <!-- Custom skin structure -->
      </media-time-slider>
    </div>
  </media-container>
</video-provider>
```
</FrameworkCase>

Read more about components <DocsLink slug="concepts/ui-components">in the components guide →</DocsLink>

## Coming soon

- More built-in skins for different use cases
- CLI tool for ejecting and customizing skins