Components / Media
VideoPlayer
Video player with controls, variants, and thumbnail support.
Preview
1import { VideoPlayer } from "@/components/ui/video-player"2
3export function VideoPlayerDemo() {4 return (5 <VideoPlayer6 src="https://example.com/video.mp4"7 poster="https://example.com/poster.jpg"8 variant="default"9 controls10 autoPlay={false}11 />12 )13}thumbnail
The thumbnail style of this component.
1import { VideoPlayer } from "@/components/ui/video-player"2
3export function VideoPlayerDemo() {4 return (5 <VideoPlayer6 src="https://example.com/video.mp4"7 poster="https://example.com/poster.jpg"8 variant="thumbnail"9 controls10 autoPlay={false}11 />12 )13}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/video-playerUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.