QuackElements
Browse components+
Components/Aspect Ratio

Aspect Ratio

A composable aspect ratio primitive for modern product interfaces.

Interactive example

16:9 canvas

Product cover

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add aspect-ratio

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { AspectRatio } from "@/components/quack/aspect-ratio"

<AspectRatio ratio={16 / 9}>
  <div className="size-full rounded-xl bg-muted" />
</AspectRatio>