Playback speed customization enhances content consumption—button groups enable speed selection. This React component combines shadcn/ui's Button and ButtonGroup components for playback speed controls with stateful variant toggling across common speed presets (0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x) and descriptive alternatives (Slow, Normal, Fast, Faster). Built on Radix UI with array-based preset generation and variant switching between default (active) and outline (inactive) states, the pattern delivers speed controls with clear selection indication. Perfect for video platforms like YouTube or Vimeo enabling faster consumption, podcast apps like Overcast or Pocket Casts adjusting narration speed, e-learning platforms accelerating lecture playback, or any media interface where playback speed should be customizable—button groups unify speed options, active variant highlights current speed, numeric and descriptive labels accommodate different user preferences. The dual pattern approach (numeric multipliers vs descriptive labels) demonstrates how speed controls balance precision for power users who think in exact multipliers against clarity for casual users who prefer qualitative speed descriptions, with both variants providing the same underlying speed adjustment functionality.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-4.json

npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-4.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-media-4.json

bunx shadcn@latest add https://www.shadcn.io/registry/button-group-media-4.json

Related patterns you will also like

Questions you might have