104Get started
HextaUI

Aspect ratio: Invalid ratio

0, negative numbers and unparsable strings fall back to a square and log a warning in development.

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

export function AspectRatioInvalidRatio() {
  return (
    <div className="grid w-full max-w-md grid-cols-2 gap-3">
      <AspectRatio ratio={0} className="rounded-lg border" />
      <AspectRatio
        ratio={"abc" as AspectRatioValue}
        className="rounded-lg border"
      />
    </div>
  )
}

Add this example

This adds the example as components/examples/aspect-ratio/invalid-ratio.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-invalid-ratio.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