104Get started
HextaUI

Aspect ratio: As a figure

Keep captions outside the box so they don’t change the ratio.

Sunset over mountains
Dolomites at dusk, photographed from Seceda.
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioFigure() {
  return (
    <figure className="flex w-full max-w-md flex-col gap-2">
      <AspectRatio ratio={16 / 9} className="rounded-lg">
        <img src="/preview/landscape.svg" alt="Sunset over mountains" />
      </AspectRatio>
      <figcaption className="text-xs text-muted-foreground">
        Dolomites at dusk, photographed from Seceda.
      </figcaption>
    </figure>
  )
}

Add this example

This adds the example as components/examples/aspect-ratio/figure.tsx, together with the Aspect ratio component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/aspect-ratio-figure.json

To add only the component, follow the Aspect ratio installation.

Props in this example

The Aspect ratio props this example sets, from the API reference.

AspectRatio

PropTypeDefault
ratio
number | `${number}/${number}` | `${number}:${number}`1

Every prop is in the Aspect ratio API reference.

More Aspect ratio examples

See them all, with keyboard support and accessibility notes, on the Aspect ratio page.

Related components