;
};
The elements ship as a shadcn registry. Add them with the CLI and the source is
copied into your project. They also need the BeyondWords player script on the
page.
## Prerequisites
* A project where you can run `npx` commands and serve ES modules. The CLI
copies the element source into your project.
* A BeyondWords **project ID** and a **source ID** (or content ID). The examples
below use a public demo project.
## Load the player script
The elements expect the BeyondWords player as a global `BeyondWords`. Add the
player UMD script to your page so it loads before the provider connects:
```html theme={null}
```
## Add a component
Add the [Play Pause Button](/player-ui/html/play-pause-button). No configuration
is needed. The `--html` flag selects the HTML registry, and the CLI resolves
dependencies automatically, so this also pulls in
[Player Provider](/player-ui/html/player-provider) and
[New Event](/player-ui/html/new-event).
```bash theme={null}
npx @beyondwords/cli components add play-pause-button --html
```
The CLI copies the files to `components/beyondwords/` by default (it asks
first), or respects your aliases if the project has a `components.json`. The
examples in these docs import from `@/registry/html/`. Adjust the paths to
wherever the files landed, and serve them through a bundler or an import map so
the browser can resolve them.
## Build your first player
Each module calls `customElements.define`, so importing it registers the tag.
Nest your controls inside a ``, which mounts the player and
shares it with the elements inside. `data-show-user-interface="false"` hides the
player's built-in UI so yours is the only one on the page.
```html theme={null}
```
Here's that button running live:
It looks plain because the elements are minimal by design;
[Theming](/player-ui/html/theming) shows how to make it yours. Add more
controls the same way: import the module, nest the element inside the provider.
To build your own controls, extend `BwPlayerConsumer`, which resolves the
player instance from the nearest ``. See
[Player Provider](/player-ui/html/player-provider) for the pattern, and
[New Event](/player-ui/html/new-event) for emitting player events.
## Using the shadcn CLI instead (optional)
The registry also works with the shadcn CLI directly. Add components by full
URL:
```bash theme={null}
npx shadcn add https://ui.beyondwords.io/r/html/play-pause-button.json
```
Or register the registry namespace once in your `components.json`, then use
short names:
```json components.json theme={null}
{
"registries": {
"@beyondwords-html": "https://ui.beyondwords.io/r/html/{name}.json"
}
}
```
```bash theme={null}
npx shadcn add @beyondwords-html/play-pause-button
```
## Next steps
Style the elements to match your brand.Provide and consume the player.Start from a complete, pre-built player.Fix common setup issues.