React 3:2 Aspect Ratio (Photography)
A 3:2 photography aspect ratio container for DSLR images, print media, and professional photo displays
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Professional cameras shaped this ratio. This React component wraps content in a 3:2 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (3 / 2) maintains DSLR sensor proportions matching professional photography standards, preventing layout shift when images load. Perfect for photo galleries, portfolio displays, print-optimized layouts, or any content from professional cameras—keeps photography aspect locked while width adapts responsively to create elegant, balanced image presentations.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-5.jsonRelated patterns you will also like
4:3 Traditional
Classic television aspect ratio
16:9 Widescreen
Modern video aspect ratio
1:1 Square
Equal width and height ratio
2:1 Panoramic
Wide panoramic aspect ratio
21:9 Ultrawide
Extra wide cinematic aspect ratio
9:16 Vertical
Mobile and story format ratio