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.