Question 1

What is an aspect ratio component?

Accepted Answer

An aspect ratio is a layout container that keeps its content at a fixed width-to-height ratio: 16:9 for widescreen video, 4:3 for traditional media, 1:1 for square crops, 21:9 for ultrawide banners. It's shadcn.io's AspectRatio component, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid, and styled with Tailwind CSS. Each example is one small file.

Question 2

Are these aspect ratio examples free?

Accepted Answer

Yes. Every aspect ratio example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is this different from Tailwind's aspect-ratio utilities?

Accepted Answer

Both keep a box at a fixed shape. AspectRatio gives that shape one `ratio` prop, a number you can compute, such as `16 / 9` or `1.618`, instead of a class per ratio, and keeps the same API on every framework and library. For a fixed ratio in a single place, Tailwind's `aspect-video` or `aspect-square` is enough.

Question 4

When should I use an aspect ratio container instead of letting content size itself?

Accepted Answer

Use AspectRatio when the container must reserve space before its content loads: images, videos, embedded iframes, skeleton placeholders. Letting the image set the height shifts the layout when it arrives. Content whose size is known at render time, such as text or icons, doesn't need it.

Question 5

Which aspect ratio should I use for embedded video?

Accepted Answer

Most video, from YouTube and Vimeo to HTML5 players, is 16:9, so the widescreen example fits single-video embeds. Use 9:16 for vertical mobile video such as stories and reels, 21:9 for cinematic trailers, and 3:2 for camera photos. Matching the ratio to the source avoids letterboxing.

Question 6

When should I use a 1:1 square aspect ratio?

Accepted Answer

Square works for product thumbnails, avatar grids, social preview cards, and galleries where a consistent tile size matters more than showing the whole image. Pair it with `object-cover` on the image so it fills the square without distortion; the edges get cropped.

Question 7

How do I handle images that don't match the frame's ratio?

Accepted Answer

Two choices. `object-cover` fills the frame and crops the overflow, best for photos whose subject sits near the center. `object-contain` fits the whole image inside and leaves bars, best for product shots and artwork; give the frame a background such as `bg-muted` so the bars look intended.

Question 8

Can I use an aspect ratio for responsive hero sections?

Accepted Answer

Yes. The frame takes its width from its parent, so a responsive width gives a responsive height. To change the ratio itself per breakpoint, render one frame per ratio and show one at a time with `hidden md:block`. For a hero that fills the viewport, use `h-screen` instead: a ratio is about the content's shape, not the screen's.

Question 9

How do I install an aspect ratio example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the AspectRatio component to your project if you don't have it yet. Then replace the placeholder with your own image or video.

Question 10

How do I set a ratio that isn't in the gallery?

Accepted Answer

`ratio` takes any positive number, width divided by height: `16 / 9` for widescreen, `3 / 4` for portrait, `1.618` for the golden ratio. The default is `1`, a square.

Question 11

How do I make an aspect ratio container responsive?

Accepted Answer

Give the frame's parent a width, such as `w-full max-w-md` or a grid cell. The height follows the width and the ratio, so the frame resizes with its container without any JavaScript.

Question 12

Can I put videos, iframes, or a canvas inside an AspectRatio?

Accepted Answer

Yes. Put one child in the frame and make it fill it: `absolute inset-0 size-full` on an image, a video or an iframe, plus `object-cover` on media. Give an iframe a `title` and check that its source supports the ratio you chose, or its content letterboxes inside.

Question 13

What do the aspect ratio examples depend on?

Accepted Answer

Only the AspectRatio component and Tailwind CSS. There's no state and no icon library in these examples. The labels inside the frames are placeholders for your own images or video.

Question 14

Are aspect ratio examples accessible?

Accepted Answer

The frame is a layout wrapper with no meaning for assistive technology, so accessibility comes from its content: meaningful `alt` text on images, captions on videos, a `title` on iframes. Give decorative images an empty `alt` so screen readers skip them.

Question 15

Can I use these examples with React Server Components?

Accepted Answer

The examples are static markup with no state, so on React they render as Server Components and need no client boundary of their own. Only interactive content inside the frame, such as a video player, needs one.

Question 16

Which Tailwind CSS version do these examples need?

Accepted Answer

The examples are written for Tailwind CSS v4, the version shadcn.io's components use, and use its class names and design tokens such as `bg-muted`.

Aspect Ratio Examples

1:1 Aspect Ratio (Square)

16:9 Aspect Ratio (Widescreen)

2:1 Aspect Ratio (Panoramic)

21:9 Aspect Ratio (Ultrawide)

3:2 Aspect Ratio (Photography)

4:3 Aspect Ratio (Traditional)

9:16 Aspect Ratio (Vertical/Mobile)

More component examples

Card

Collapsible

Scroll Area

Separator

Accordion

Avatar

Badge

Breadcrumb

Aspect Ratio examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every aspect ratio example. One prompt away.