Shadcn.io is not affiliated with official shadcn/ui
16:9 Aspect Ratio (Widescreen)
A 16:9 widescreen aspect ratio container for video players, hero images, and modern multimedia content
Widescreen is everywhere now. This React component wraps content in a 16:9 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (16 / 9) maintains perfect widescreen proportions regardless of container width, preventing layout shift when images or videos load. Perfect for YouTube embeds, video players, hero banners, or any multimedia content matching modern display standards—keeps aspect locked while parent width flexes responsively.
16:9 Aspect Ratio (Widescreen) preview
Installation
Related Components
21:9 Ultrawide
Extra wide cinematic aspect ratio
1:1 Square
Equal width and height ratio
4:3 Traditional
Classic television aspect ratio
3:2 Photography
DSLR camera aspect ratio
9:16 Vertical
Mobile and story format ratio
2:1 Panoramic
Wide panoramic aspect ratio
FAQ
Was this page helpful?
Sign in to leave feedback.