Shadcn.io is not affiliated with official shadcn/ui
Player Controls
Media player control buttons with play/pause toggle and skip functionality for audio and video interfaces
Media playback requires intuitive controls—button groups unify player actions. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's PlayIcon, PauseIcon, SkipBackIcon, and SkipForwardIcon for media player controls with stateful play/pause toggling. Built on Radix UI with icon-only compact variants and icon-with-text descriptive variants using size="sm" for toolbar density, the pattern delivers media controls with immediate recognition. Perfect for audio players like Spotify or Apple Music controlling track playback, video platforms like YouTube or Vimeo offering playback controls, podcast apps managing episode progression, or any media interface where playback controls should be grouped—button groups unify media actions, play/pause toggle communicates state, skip buttons enable quick navigation. The unified button group visually connects related media controls reducing cognitive load when users scan for playback functionality, while the play/pause state toggle provides immediate visual feedback about current playback status without requiring separate indicators. In media-rich applications, grouping these controls creates a recognizable control panel pattern users expect from decades of media player conventions across physical devices and digital interfaces.
Player Controls preview
Installation
Related Components
Volume Controls
Audio level adjustment buttons
Zoom Controls
Image and document zoom buttons
Playback Speed
Video speed selection
View Switcher
Layout mode controls
Outline Button
Border-style button variant
Toggle Component
On/off state controls
FAQ
Was this page helpful?
Sign in to leave feedback.