2:1 Aspect Ratio (Panoramic)

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.

2:1 Aspect Ratio (Panoramic) preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/aspect-ratio-standard-7.json

npx shadcn@latest add https://www.shadcn.io/r/aspect-ratio-standard-7.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/aspect-ratio-standard-7.json

bunx shadcn@latest add https://www.shadcn.io/r/aspect-ratio-standard-7.json

Related Components

FAQ