Skip to main content
A set of minimal, composable components for building your own UI on top of the BeyondWords player. They give you play/pause, seeking, playback rate, a playlist and more as small building blocks you compose and style yourself. The player keeps doing the hard part: playback, analytics, ads, segments and lock-screen integration. This is not a packaged widget. The components are distributed as a shadcn registry, so you own the code: the CLI copies the source straight into your project, where you can restyle, rearrange or rewrite it.
Here’s the Standard Player example, running live, built entirely from these components:
Prefer custom elements? Everything here is also available as Web Components. Use the React / HTML tabs at the top of the Components section.

​
How it works

The kit is three layers on top of one engine. Stop at whichever layer gives you the control you need:
  1. Player Provider: a thin React wrapper around the player JavaScript SDK. It mounts the player, holds the instance, and shares it with everything inside. This is the foundation everything else sits on.
  2. Components: small, minimal primitives like Play Pause Button and Progress Bar. You bring the styling.
  3. Examples: complete, pre-assembled players such as Standard Player that you drop in and tweak, or read as a worked example of how the primitives fit together.
Every component behaves the same way:
  • It reads state with usePlayerSelector, which re-renders only when the selected value changes. A time display updating every frame won’t re-render your play button.
  • It drives the player by emitting events built with newEvent. This is the same path the standard player UI uses, so analytics, ads and segment logic stay correct. Simple state such as playbackRate can also be set directly on the instance.
Every layer is copied into your codebase, so there’s no black box and no version lock-in. The trade-off is that you maintain what you customize.

​
Next steps

Setup

Install the components and build your first player.

Components

Browse the minimal building blocks.

Theming

Restyle the components to match your brand.

Examples

Drop in a complete, pre-built player.