Shadcn Aspect Ratio

Q: Can I set a custom aspect ratio not in the presets?

Yes. Pass any ratio: ` ` for 3:2, or `{5 / 3}` for 5:3. Ratio is width ÷ height.

Browse 8 production-ready shadcn aspect-ratio components for image galleries, video previews, and responsive media. Aspect Ratio is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create so radius, colors, and typography match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

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 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 ratio as 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 img is a random grayscale picsum.photos placeholder whose alt is only the ratio label; swap src and write a real alt
Set width on a parent, as the max-w-md or max-w-xs wrapper does; radix puts className on an absolute inner layer, where a width class breaks the ratio

Markdownhttps://web.dev.reui.io/components/aspect-ratio.md

MCPget_component("aspect-ratio")

Installnpx shadcn@latest add aspect-ratio

Full index for agents:llms.txtReUI MCP setup

Shadcn Aspect Ratio: Maintain Fixed Media Proportions

Shadcn Aspect Ratio is a layout primitive that reserves space in a fixed width-to-height ratio, preventing layout shift when images or video load. It follows Radix UI composition conventions and works seamlessly with Base UI-style unstyled primitives, with full compatibility for Shadcn Create styling.

It wraps media (images, video embeds, iframes) and maintains the ratio regardless of container width, so your galleries and previews scale responsively without jarring reflow when assets load.

ReUI lists aspect-ratio components inside image galleries, dashboard cards, and e-commerce product layouts so you evaluate how they pair with Shadcn Card, Shadcn Skeleton for loading, and responsive grids. The sections below cover what the component is, why it matters, key features, and integration guidance.

What is Shadcn Aspect Ratio?

An aspect ratio container reserves space at a fixed ratio (16:9, 1:1, 4:3) before content loads, preventing cumulative layout shift when images or video arrive. Shadcn Aspect Ratio wraps your media and applies CSS that enforces the ratio on the container itself, not the image.

Components here show 16:9 widescreen video frames, 1:1 square avatars and product photos, and 4:3 traditional aspect ratios in grids, galleries, and card layouts. They help you choose a ratio and see how it scales on mobile without breaking the layout.

Why Use Shadcn Aspect Ratio?

Layouts jump when images load asynchronously, hurting Core Web Vitals and user experience. Aspect ratio containers solve this by claiming space upfront so text and buttons stay put while media loads.

The gallery and card examples on this page show how aspect ratio pairs with Shadcn Skeleton for loading states and responsive grids so your UI feels polished on all screen sizes.

Shadcn Aspect Ratio Features

Prevents Layout Shift. Reserves space before images load so text, buttons, and surrounding content stay in place, improving Core Web Vitals.
Common Ratios. Supports 16:9 (widescreen video), 1:1 (square photos), 4:3 (traditional), and custom ratios:set via the ratio prop.
Works with Next.js Image. Pairs with next/image for optimized, lazy-loaded assets while maintaining proportion without CSS hacks.
Responsive Scaling. Container scales to its parent width while maintaining the ratio, so galleries and card grids look right on all screen sizes.
Integrates with Skeleton. Pair with Shadcn Skeleton inside the aspect-ratio container to show a loading placeholder that matches the final image size.

Wrap images inside Shadcn Card with an aspect-ratio container so images scale responsively while text and actions stay below. Use a Shadcn Skeleton at the same ratio for loading states.

Combine aspect-ratio with Shadcn Badge overlays to mark images as new, featured, or out-of-stock. Pair with Shadcn Button as action overlays on hover when images need quick interactions.

In gallery layouts, use aspect-ratio across multiple Shadcn Popover or lightbox components so all thumbnails maintain consistent proportions. Add Shadcn Input next to the gallery for search and filtering.

Frequently Asked Questions

What is aspect ratio and why does it matter for React apps?

Aspect ratio reserves space at a fixed width-to-height ratio before images load. This prevents layout shift (Cumulative Layout Shift, a Core Web Vital), keeping text and buttons stable while assets arrive.

Which aspect ratio should I choose for product images?

1:1 (square) is standard for profiles and product thumbnails; 16:9 for hero images and video; 4:3 for traditional photos. Match your image source and design, then test on mobile.

Can I use aspect-ratio with Next.js Image component?

Yes. Wrap the Image component with AspectRatio to reserve space while next/image handles optimization. The container enforces the ratio, and the image fills with object-cover.

How do I show a loading state inside aspect-ratio?

Place a Shadcn Skeleton inside the AspectRatio container at the same ratio. When the image loads, swap it for the real asset.

Does aspect-ratio work on mobile?

Yes. The container is responsive and scales to its parent. No special mobile handling needed; test that images look good at smaller viewports.

Can I set a custom aspect ratio not in the presets?

Yes. Pass any ratio: <AspectRatio ratio={3 / 2}> for 3:2, or {5 / 3} for 5:3. Ratio is width ÷ height.

How are ReUI aspect-ratio components different from a basic code snippet?

They show galleries, cards, and responsive grids so you see how aspect-ratio interacts with Shadcn Card, Shadcn Skeleton, and surrounding layout on mobile and desktop.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.