Aspect Ratio

Displays content within a desired ratio.

shadcn/ui docs →

Preview

16:9

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/aspect-ratio.json

Dependencies: @radix-ui/react-aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <img
    src="/placeholder.jpg"
    alt="Image"
    className="rounded-base object-cover w-full h-full"
  />
</AspectRatio>
0