> ## Documentation Index > Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt > Use this file to discover all available pages before exploring further. # Theming > Style the components to match your brand by editing the code you own. export const MinimalPlayerDemo = () => { const newEvent = props => ({ id: crypto.randomUUID(), createdAt: new Date().toISOString(), status: "pending", initiatedBy: "user", ...props }); const formatTime = time => { if (time < 0) time = Math.max(0, time); const hours = Math.floor(time / 3600).toString(); let minutes = Math.floor(time % 3600 / 60).toString(); let seconds = Math.floor(time % 60).toString(); if (seconds.length < 2) seconds = `0${seconds}`; if (time < 3600) return `${minutes}:${seconds}`; if (minutes.length < 2) minutes = `0${minutes}`; return `${hours}:${minutes}:${seconds}`; }; const RATES = Array.from({ length: 12 }, (_, i) => Math.round((0.9 + i * 0.1) * 10) / 10); const [target, setTarget] = useState(null); const [player, setPlayer] = useState(null); const [playbackState, setPlaybackState] = useState("stopped"); const [callToAction, setCallToAction] = useState(null); const [currentTime, setCurrentTime] = useState(0); const [playbackRate, setPlaybackRate] = useState(1); useEffect(() => { if (!target) return; let instance; const init = () => { instance = new window.BeyondWords.Player({ target, projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", widgetStyle: "none", showUserInterface: false, analyticsConsent: "none" }); const sync = () => { setPlaybackState(instance.playbackState); setCallToAction(instance.callToAction); setCurrentTime(instance.currentTime); setPlaybackRate(instance.playbackRate); }; instance.addEventListener("", sync); sync(); setPlayer(instance); }; if (window.BeyondWords) init(); else window.addEventListener("BeyondWordsReady", init); return () => { window.removeEventListener("BeyondWordsReady", init); if (instance) instance.destroy(); }; }, [target]); const isPlaying = playbackState === "playing"; const stopped = playbackState === "stopped"; const rateMenuId = useId(); const rateMenuRef = useRef(null); const [rateMenuOpen, setRateMenuOpen] = useState(false); useEffect(() => { if (!rateMenuOpen) return; const onPointerDown = event => { if (!rateMenuRef.current?.contains(event.target)) setRateMenuOpen(false); }; const onKeyDown = event => { if (event.key === "Escape") setRateMenuOpen(false); }; document.addEventListener("pointerdown", onPointerDown); document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("pointerdown", onPointerDown); document.removeEventListener("keydown", onKeyDown); }; }, [rateMenuOpen]); return
{player &&
{stopped ?
{callToAction ?? "Listen to article"}
: <>
{rateMenuOpen &&
    {RATES.map(rate => { const selected = Math.abs(rate - playbackRate) < 0.001; return
    • ; })}
}
{formatTime(currentTime)}
}
}
; }; The components are deliberately minimal and unopinionated. There's no `theme` prop and no set of CSS variables to override. Because the CLI copies the source into your project, **you own the code, so styling means editing it**: change its classes, swap its icons, restructure its markup. Nothing is hidden behind a package boundary. This page shows the patterns. The [Minimal Player](/player-ui/react/minimal-player) example below is a full worked walkthrough. ## Where the styles live After you add a component, its source sits in your project (by default under `@/registry/react/`). Open the file and you'll find ordinary JSX with a default inline SVG icon and, where needed, a little Tailwind. For example, the [Play Pause Button](/player-ui/react/play-pause-button) renders a bare button with the default play / pause icon: ```tsx PlayPauseButton.tsx theme={null} ``` ## Edit the classes in place To theme it, add the classes you want and swap the icons for your own. For example, restyle the same component into a round brand-purple button: ```tsx PlayPauseButton.tsx theme={null} ``` Use your own design tokens instead of arbitrary values (`bg-[#943bfc]`) wherever you can, such as `bg-brand` or `bg-primary` from your Tailwind theme. This keeps the player in sync with the rest of your app. ## Swap the icons Each component ships a **default inline SVG** icon (the same art the real BeyondWords player uses). It's just markup in the file you own, so replace it with your own SVG, an icon library, or text. The button reads `playbackState`, so you decide what each state renders: ```tsx theme={null} {isPlaying ? ( {/* your pause icon */} ) : ( {/* your play icon */} )} ``` The icons use `fill="currentColor"`, so by default they take the surrounding text color. Set a color on the button (or the icon) to change them. ## Conditional classes with `cn` For state-dependent styling, the [`cn`](https://github.com/dcastil/tailwind-merge) helper (installed at `@/lib/utils`) merges class lists and resolves Tailwind conflicts. The examples use it to restyle themselves when they detach into a floating widget: ```tsx theme={null} import { cn } from '@/lib/utils';
``` ## Dark mode There's no dark-mode toggle baked in. Use Tailwind's `dark:` variant so the player follows your app's existing color scheme: ```tsx theme={null}
``` ## Primitives vs. examples * **Components** (primitives) are minimal and unopinionated on purpose. The [Progress Bar](/player-ui/react/progress-bar), for instance, ships just enough Tailwind to be usable: a translucent track with a solid fill. Override those classes freely. * **Examples** are fully styled, pre-assembled players. Read them as worked references, or copy one and restyle it rather than starting from scratch. ## Worked example: Minimal Player The Minimal example takes the same components shown throughout these docs and restyles and recomposes them into a clean "listen to article" strip in the style of news-site players: a transparent single-line bar with no background pill. While stopped it shows only a play button and the call to action; once playback starts it swaps in a skip-back 10s control, a 0.9x–2x speed menu, and the current time. Nothing about the player engine changed. Only the classes, icons and layout did. Use it as a template. Copy it, restyle it to match your brand, and you have a custom player without touching playback, analytics, ads or segments.