ShadcnStore

Appearance

Shadcn Aspect Ratio ​

The shadcn/ui Aspect Ratio locks content to a fixed width-to-height ratio, styled with Tailwind CSS v4. It is ideal for images, video embeds, and thumbnails that must keep a consistent shape and reserve space before loading. Aspect ratios keep media tidy across ShadcnStore blocks.

Key features ​

  • Locks any content to a fixed ratio (16:9, 1:1, 4:3…).
  • Reserves space to prevent layout shift.
  • Works with images, video embeds, and maps.
  • Composes with rounded and object-fit utilities.

Installation ​

bash
npx shadcn@latest add aspect-ratio

Usage ​

tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function Example() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
      <img src="/photo.jpg" alt="Photo" className="size-full rounded-lg object-cover" />
    </AspectRatio>
  )
}

Common ratios ​

Pass any number to ratio: 1 for square avatars and thumbnails, 4 / 3 for classic photos, 16 / 9 for video and hero media.

tsx
<AspectRatio ratio={1}>{/* square */}</AspectRatio>
<AspectRatio ratio={4 / 3}>{/* classic */}</AspectRatio>
<AspectRatio ratio={16 / 9}>{/* video */}</AspectRatio>

Accessibility ​

  • Always give images inside a meaningful alt.
  • Use object-cover or object-contain so media fills the ratio without distortion.
  • For video embeds, keep the iframe's own title for assistive tech.

When to use the Aspect Ratio ​

Use an Aspect Ratio when media must keep a consistent shape and reserve space: product thumbnails, blog cover images, video embeds, and gallery tiles. For free-flowing images that adapt to content, a plain image with max-width is enough.

Used in these blocks ​

An Aspect Ratio commonly sits inside a Card or a Carousel slide, and pairs with a Skeleton placeholder while media loads.

FAQ ​

What is the shadcn aspect ratio used for? ​

The Aspect Ratio locks content, usually an image or embed, to a fixed width-to-height ratio like 16:9 so layouts stay consistent and avoid shift.

How do I set the ratio? ​

Pass ratio as a number, for example ratio={16/9} or ratio={1} for a square.

Does it prevent layout shift? ​

Yes. It reserves the space before the media loads, preventing cumulative layout shift.

How do I round the corners? ​

Apply rounded-* and object-cover to the inner image and a matching radius on the AspectRatio.

Copyright © 2025-2026 ShadcnStore