React 16:9 Aspect Ratio (Widescreen)
A 16:9 widescreen aspect ratio container for video players, hero images, and modern multimedia content
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-1.jsonRelated patterns you will also like
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
Questions you might have
React Alert - Warning with Everything
A complete warning alert with icon, title, description, and action buttons for maximum cautionary clarity and informed decision making
React 4:3 Aspect Ratio (Traditional)
A 4:3 traditional aspect ratio container for classic content, presentations, and legacy media formats