React 21:9 Aspect Ratio (Ultrawide)
A 21:9 ultrawide aspect ratio container for cinematic content, immersive experiences, and ultra-widescreen displays
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Cinematic width demands attention. This React component wraps content in a 21:9 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (21 / 9) maintains ultrawide proportions matching cinema screens and gaming monitors, preventing layout shift when media loads. Perfect for film trailers, panoramic imagery, immersive hero sections, or content targeting ultra-widescreen displays—keeps cinematic aspect locked while width flexes responsively to parent containers for dramatic visual impact.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-4.jsonRelated patterns you will also like
16:9 Widescreen
Standard modern video ratio
2:1 Panoramic
Wide panoramic aspect ratio
3:2 Photography
DSLR camera aspect ratio
1:1 Square
Equal width and height ratio
4:3 Traditional
Classic television aspect ratio
9:16 Vertical
Mobile and story format ratio