1:1 square aspect ratio
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: An equal sided box for product shots, album covers and grid tiles, kept to 20rem wide
When to use
- Video, banner and screenshot slots in widescreen shapes such as 16:9, 21:9 and 16:10
- Photo and thumbnail slots in square, landscape or portrait shapes, cropped to fill the box
- Media boxes whose height follows their width, so the space is held before the image arrives
When not to use
- A small round user photo with an initials fallback: use the Avatar component
- A sign in page split between the form and a full height image panel: use the Auth blocks
- Several images the user swipes or steps through one at a time: use the Carousel component
- A choice of exactly one option from a short visible list: use the Radio Group component
Agent notes
- Pass
ratioas width divided by height, as in 16 / 9; the base twin requires it and the radix twin falls back to 1 when it is missing - Every
imgis a random grayscalepicsum.photosplaceholder whosealtis only the ratio label; swapsrcand write a realalt - Set width on a parent, as the
max-w-mdormax-w-xswrapper does; radix putsclassNameon an absolute inner layer, where a width class breaks the ratio
https://reui.io/components/aspect-ratio/c-aspect-ratio-3.mdget_example("c-aspect-ratio-3")npx shadcn@latest add @reui/c-aspect-ratio-3Shadcn Components in Aspect Ratio Square
About Shadcn Aspect Ratio Square
1:1 square aspect ratio. Built with the Aspect Ratio component. A free, open source shadcn aspect ratio example you can install with npx shadcn@latest add @reui/c-aspect-ratio-3 and edit as your own code.
What You Can Build With Shadcn Aspect Ratio Square
- Composes Aspect Ratio, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-aspect-ratio-3
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Aspect Ratio Examples
- Widescreen 16:9 widescreen aspect ratio
- Standard 4:3 standard aspect ratio
- Ultrawide 21:9 ultrawide aspect ratio
- Tall Portrait 9:16 portrait aspect ratio
- Classic Photo 3:2 classic photography aspect ratio
- Social Portrait 4:5 social media portrait aspect ratio
- Monitor 16:10 computer monitor aspect ratio
Related Shadcn Component Categories
Open-source shadcn attachment components for chat composers, upload states, and file previews.
Open-source shadcn autocomplete components for smart search, typeahead inputs, and suggestion lists.
Open-source shadcn avatar components for user profiles, team directories, and comment threads.
Open-source shadcn badge components for status labels, feature tags, and count indicators.
Open-source shadcn breadcrumb components for navigation trails, docs hierarchy, and app wayfinding.
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Frequently Asked Questions
When should I use Shadcn Aspect Ratio Square?
Use it for an equal sided box for product shots, album covers and grid tiles, kept to 20rem wide.
Shadcn Aspect Ratio as a whole fits:
- Video, banner and screenshot slots in widescreen shapes such as 16:9, 21:9 and 16:10
- Photo and thumbnail slots in square, landscape or portrait shapes, cropped to fill the box
- Media boxes whose height follows their width, so the space is held before the image arrives
For a small round user photo with an initials fallback, use the Avatar component. For a sign in page split between the form and a full height image panel, use the Auth blocks. For several images the user swipes or steps through one at a time, use the Carousel component. For a choice of exactly one option from a short visible list, use the Radio Group component.
How do I install Shadcn Aspect Ratio Square?
Is Shadcn Aspect Ratio Square free to use?
Which components does Shadcn Aspect Ratio Square use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.