React 2:1 Aspect Ratio (Panoramic)
A 2:1 panoramic aspect ratio container for wide landscape photography, banner images, and sweeping vistas
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Panoramas demand width. This React component wraps content in a 2:1 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (2) maintains dramatic horizontal proportions perfect for sweeping landscapes and wide banner images, preventing layout shift when content loads. Perfect for panoramic photography, hero banners, website headers, or dramatic landscape imagery—keeps wide aspect locked while adapting width responsively for expansive visual storytelling across desktop and mobile displays.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-7.jsonRelated patterns you will also like
21:9 Ultrawide
Extra wide cinematic ratio
16:9 Widescreen
Standard modern video 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