Video

Data Display

A native video player in a bordered, rounded wrapper.

Video renders a plain HTML5 player with preload disabled so the browser only fetches the source when the user hits play.

npx shadcn@latest add video

Default

A 16:9 player with controls and an optional caption bar.

Preview

Live

The Big Buck Bunny clip

tsx

1<Video
2  src="https://www.w3schools.com/html/mov_bbb.mp4"
3  poster="https://picsum.photos/seed/shelf-video/640/360"
4  title="The Big Buck Bunny clip"
5/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
src	string	The video source URL.
poster	string	Optional image shown before playback.
title	string	Optional caption bar below the player.