Aspect Ratio

Locks its content to a given width-to-height ratio — handy for images, video, and embeds that must not jump as they load.

16 / 9

tsx

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

export default function AspectRatioDemo() {
  return (
    <div className="w-72">
      <AspectRatio
        ratio={16 / 9}
        className="bg-muted shadow-well flex items-center justify-center overflow-hidden rounded-lg squircle"
      >
        <span className="text-muted-foreground text-sm">16 / 9</span>
      </AspectRatio>
    </div>
  )
}

bunx --bun @seamui/cli@latest add aspect-ratio

Notes

Uses the native CSS aspect-ratio property; pass ratio as a number (e.g. 16 / 9).

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.