Installation
Install the following dependencies:
Copy and paste the following code into your project.
import { cn } from "@/lib/utils"
function AspectRatio({
ratio,
className,
...props
}: React.ComponentProps<"div"> & { ratio: number }) {
return (
<div
data-slot="aspect-ratio"
style={
{
"--ratio": ratio,
} as React.CSSProperties
}
className={cn("relative aspect-(--ratio)", className)}
{...props}
/>
)
}
export { AspectRatio }
Update the import paths to match your project setup.
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>Examples
Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.
For more information, see the Base UI documentation.