Aspect Ratio

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

export function AspectRatioDemo() {

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/aspect-ratio
Copy

Usage#

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

Copy<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 { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioSquare() {

Portrait#

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

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

export function AspectRatioPortrait() {

API Reference#

AspectRatio#

The AspectRatio component displays content within a desired ratio.