React 4:3 Aspect Ratio (Traditional)
A 4:3 traditional aspect ratio container for classic content, presentations, and legacy media formats
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Before widescreen took over, 4:3 ruled everything. This React component wraps content in a 4:3 aspect ratio using shadcn/ui's AspectRatio built on Radix UI. The ratio prop (4 / 3) maintains traditional television proportions, preventing layout shift and ensuring consistent dimensions. Perfect for classic video content, PowerPoint presentations, iPad displays, or retro designs honoring pre-HD formats—keeps traditional aspect locked while adapting width responsively to parent containers.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-2.jsonRelated patterns you will also like
16:9 Widescreen
Modern video aspect ratio
3:2 Photography
DSLR camera aspect ratio
1:1 Square
Equal width and height ratio
9:16 Vertical
Mobile and story format ratio
21:9 Ultrawide
Extra wide cinematic aspect ratio
2:1 Panoramic
Wide panoramic aspect ratio