Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

1:1 Aspect Ratio (Square) for Solid

A square frame, as tall as it is wide, with the label 1:1 centered in a muted box. The width follows the parent.

UI library: Ark UI

A muted box shows 1:1 in the center. The frame is exactly as tall as it is wide, and the width comes from the parent.

Use a square for feed posts, avatars or album art. A Card can put a title under the same frame. In Solid, Ark UI does not load an image into it.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Aspect Ratio anatomy: root, media, ratio

Usage

<div class="w-full max-w-md">
    <AspectRatio ratio={1}>
      <div class="flex size-full items-center justify-center rounded-md bg-muted">
        <span class="text-muted-foreground text-sm">1:1</span>
      </div>
    </AspectRatio>
  </div>

FAQ

How is the square set?

ratio is 1 on AspectRatio, width divided by height. The height matches the width. The centered label reads "1:1".

Where does the frame's width come from?

The parent is w-full max-w-md. The height follows that width. Give the wrapper a width, because a ratio with no width can collapse. max-w-md caps the width, and the height matches it.

How does the label fill the frame?

The child is a div with size-full, flex items-center justify-center, rounded-md, and bg-muted. The span is text-sm text-muted-foreground. Those classes are on the child, so the frame's shape stays on ratio.

How does ratio become a height?

The ratio is stored in the --ratio custom property, and the aspect-ratio utility reads that variable.

How do I put an image or a video in this frame?

Put one child in AspectRatio and make it fill the box. The Aspect Ratio usage places the image absolutely, inset on every side, at full size, with object-cover. This file's child is the muted "1:1" label.

What happens if I omit ratio?

The default is 1, a square. Omitting ratio already means a square, because the default is 1. This file sets ratio={1} so the square is written next to the label.

API Reference

Aspect Ratio

Sets ratio={1}. The rest is on the Aspect Ratio page.

All 7 aspect ratio examples