import Image from "next/image";
import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioDemo() {
return (Installation
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio";<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
import Image from "next/image";
import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioSquare() {
return (Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
import Image from "next/image";
import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioPortrait() {
return (RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client";
import Image from "next/image";
import * as React from "react";
import { useTranslation } from "@/components/language-selector";API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.
For more information, see the Base UI documentation.