Skip to main content
A set of framework-agnostic custom elements for building your own UI on top of the BeyondWords player. They give you play/pause, seeking, playback rate and more as small building blocks you compose in plain HTML 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 elements 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 elements:
Using React? Everything here is also available as React 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: <bw-player-provider> mounts the player JavaScript SDK (loaded as the global BeyondWords), holds the instance, and shares it with the elements inside. This is the foundation everything else sits on.
  2. Components: small, minimal custom elements like Play Pause Button and Progress Bar. You bring the styling.
  3. Examples: complete, pre-assembled players you drop in and tweak, like the Standard Player.
Every element behaves the same way:
  • It reads state from the player instance by extending BwPlayerConsumer, which resolves the nearest provider and exposes the instance as this._player. Elements stay in sync by listening for player events and updating their own markup.
  • 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 elements and build your first player.

Components

Browse the minimal building blocks.

Theming

Restyle the elements to match your brand.

Examples

Drop in a complete, pre-built player.