Limeplay
Copy-paste media player components for React. Limeplay follows the shadcn/ui model: install a block, get the files in your app, and customize them like code you wrote yourself.
Built on Shaka Player for HLS, DASH, adaptive bitrate, and DRM-capable playback.
Documentation · Blocks · Discord · Development
Install
Start with a React project that already has shadcn/ui initialized.
npx shadcn@latest init
Add the video player block:
npx shadcn add @limeplay/video-player
Use it anywhere in your app:
import { VideoPlayer } from "@/components/limeplay/video-player/player"
export function Player() {
return (
)
}
[!TIP]
You can find more blocks in Limeplay Blocks showcase.
Goals
- Ship production-grade media players without rebuilding the hard parts. Limeplay gives you Netflix, YouTube, and Spotify-style interaction patterns with real playback behavior, not static UI.
- Cover the details users notice: resilient error states, accessible controls, keyboard navigation, responsive layouts, browser support, and modern interaction states.
- Keep ownership of the UI. Limeplay handles player logic, state, events, playlists, and media controls while the components stay fully editable in your app.
- Build on a serious playback engine. Shaka Player brings HLS, DASH, live streaming, DRM-capable playback, adaptive bitrate, and more.
For custom layouts, feature hooks, and API references, start with the quick start docs.
License
MIT © WINOFFRG
