Aspect Ratio

Displays content within a desired ratio.

<AspectRatio ratio={16 / 9}>
  <div className="absolute inset-0 rounded-md bg-muted-foreground/25" />
</AspectRatio>

Installation

pnpm dlx cubix@latest add aspect-ratio --base aria

Import

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

Example

<AspectRatio ratio={16 / 9}>
  <div className="absolute inset-0 rounded-md bg-muted-foreground/25" />
</AspectRatio>

Use ratio={1 / 1} for a square frame. This is useful for avatars and thumbnails.

<AspectRatio ratio={1 / 1}>
  <div className="absolute inset-0 rounded-md bg-muted-foreground/25" />
</AspectRatio>

Use ratio={9 / 16} for a portrait frame. This is useful for stories and mobile previews.

<AspectRatio ratio={9 / 16}>
  <div className="absolute inset-0 rounded-md bg-muted-foreground/25" />
</AspectRatio>

Note: Position the inner shape with absolute inset-0 so it fills the ratio box.

A container that keeps a constant width-to-height ratio.

Prop	Type	Default	Description
ratio	number	-	The width-to-height ratio of the container (e.g. 16 / 9 or 1 / 1).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Content displayed inside the ratio box, usually a shape or image.