React 1:1 Aspect Ratio (Square)
A 1:1 square aspect ratio container for social media content, profile images, and balanced layouts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Squares work everywhere. This React component wraps content in a 1:1 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (1) maintains perfect square proportions with equal width and height, preventing layout shift when content loads. Perfect for Instagram posts, profile pictures, product thumbnails, avatar displays, or any content requiring balanced symmetry—keeps square locked while width adapts responsively to parent container constraints.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-3.jsonRelated patterns you will also like
16:9 Widescreen
Modern video aspect ratio
9:16 Vertical
Mobile and story format ratio
4:3 Traditional
Classic television aspect ratio
3:2 Photography
DSLR camera aspect ratio
21:9 Ultrawide
Extra wide cinematic aspect ratio
2:1 Panoramic
Wide panoramic aspect ratio