Limeplay - Open Source Video Player UI ComponentsLimeplay

Player Layout

Composable structural containers for player UI.

Installation

npx shadcn add @limeplay/player-layout

Requires mediaFeature registered in your createMediaKit.

Usage

Import as a namespace and compose the layout:

components/media-player.tsx
import * as Layout from "@/components/limeplay/player-layout"
import { RootContainer } from "@/components/limeplay/root-container"
import { Media } from "@/components/limeplay/media"

export function MediaPlayer() {
  return (
    <MediaProvider>
      <RootContainer>
        <Layout.PlayerContainer>
          <Media as="video" className="size-full object-cover" />
          <Layout.ControlsOverlayContainer />
          <Layout.ControlsContainer>
            {/* Your controls */}
          </Layout.ControlsContainer>
        </Layout.PlayerContainer>
      </RootContainer>
    </MediaProvider>
  )
}

Components

RootContainer

Outermost wrapper. Manages idle state detection and focus management for accessibility.

PlayerContainer

Container for the media element. Maintains aspect ratio and handles overflow.

ControlsContainer

Structural container for player controls. Manages pointer-events for proper interaction layering.

ControlsBottomContainer

Bottom-aligned area for control buttons and sliders.

ControlsTopContainer

Top-aligned area, typically used for titles or back navigation.

ControlsOverlayContainer

Gradient overlay that provides visual separation between media and controls.

On this page