Components

Aspect Ratio

Constrains content to a specific aspect ratio. Use it to ensure images, videos, or embeds maintain their proportions across all screen sizes.

example.tsx

16:9 Aspect Ratio

4:3 Aspect Ratio

Import

tsx

import { AppAspectRatio } from "@/components/primitives/AppAspectRatio"

Common ratios

Pass any numeric expression to the ratio prop. Using division makes the intent clear at a glance.

Ratio	Value	Common use
16 / 9	1.777…	Video, hero images, wide banners
4 / 3	1.333…	Classic photo, older displays
1 / 1	1	Square avatars, thumbnails
3 / 2	1.5	Standard photography
9 / 16	0.5625	Mobile / portrait video

tsx

{/* 16:9 video */}
<AppAspectRatio ratio={16 / 9}>
  <video src="/intro.mp4" className="h-full w-full object-cover" />
</AppAspectRatio>

{/* Square thumbnail */}
<AppAspectRatio ratio={1 / 1}>
  <img src="/avatar.jpg" alt="Avatar" className="h-full w-full object-cover" />
</AppAspectRatio>

API Reference

AppAspectRatio extends the Radix UI AspectRatio primitive.

Prop	Type	Default	Description
ratio	number	1	The desired aspect ratio, expressed as width divided by height (e.g. 16/9).
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppAspectRatio.tsx

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

const AppAspectRatio = AspectRatio

export { AppAspectRatio }