Components

This is the top-most component in the library used to group media elements and control the flow of media state.

This component is used as a render target for the current provider.

Our default production-ready experience packed with customization options.

Based on the original beautiful design by Sam Potts, this layout is a simple and elegant option.

This component is used to announce important updates to screen readers.

This component is used to display a media poster or thumbnail image, generally before playback begins.

This component creates a container for control groups and controls when to show them.

This component enables actions to be performed on the media based on user gestures.

Beautifully hand-crafted collection of icons for media players.

This component is used to display the current media title.

This component is used to load and display thumbnail images.

This component is used to display certain media states as a unit of time, such as the current time or duration.

This component is used to render and display captions/subtitles.

This component is used to add text tracks.

This component is used to load and display the current chapter title.

This page showcases how to display a loading indicator while media is buffering.

This component is a generic button for displaying on and off states on press.

This component is used to play and pause media on press.

This component is used to mute and unmute media on press.

This component is used to toggle the visibility of the current captions/subtitles text track on press.

This component is used to enter and exit picture-in-picture mode on press.

This component is used to enter and exit fullscreen on press.

This component is used to display a live indicator and to seek to the live edge on press.

This component is used to seek playback forwards or backwards.

This component is used to request remote playback via Apple AirPlay.

This component is used to request remote playback via Google Cast.

A contextual text bubble that displays a description for an element which appears on interaction.

This component is used to create an input for controlling a range of values.

This component is used to create a range input for controlling the current audio gain.

This component is used to create a range input for controlling the current time of playback.

This component is used to create a range input for controlling the volume of media.

This component is used to create a range input for controlling the current playback rate.

This component is used to create a range input for controlling the current playback quality.

Used to provide users with a real-time or interactive preview of the value or selection they are making as they move the slider thumb.

This component is used to display the current value of a slider in various formats such as a raw value, percentage, or time.

Used to load a low-resolution video to be displayed when the user is hovering over or dragging the time slider.

Used to display preview thumbnails when the user is hovering or dragging the time slider.

Used to create predefined sections within a time slider interface based on the currently active chapters text track.

Visual markers that can be used to indicate value steps on the slider track.

This component is used to display content or options in a floating panel.

A button that controls the opening and closing of a menu component. The button will become a `menuitem` when used inside a submenu.

Represents a specific option or action, typically displayed as a text label or icon, which users can select.

Portals menu items into a specified location, generally the document body.

This component is used to display a set of options where only one can be checked.

This hook is used to retrieve the current audio track options.

This component is used to display a group of radio options for changing the current audio track.

This hook is used to retrieve the current audio gain options.

This component is used to display a group of radio options for changing the current audio gain.

This hook is used to retrieve the current caption/subtitle text track options.

This component is used to display a group of radio options for changing the current captions/subtitles.

This hook is used to retrieve the current chapter options.

This component is used to display a group of radio options for seeking to available chapters.

This hook is used to retrieve the current video playback quality options.

This component is used to display a group of radio options for changing the current video quality.

This hook is used to retrieve the current playback rate options.

This component is used to display a group of radio options for changing the current playback rate.

This component is used to render a specified frame of a Remotion video and generally display it before playback begins.

This component is used to render a specified frame of a Remotion video.

This component is used to render preview frames of the Remotion video over the time slider.