Components
Aspect Ratio
A layout helper that preserves media frames, cards, and placeholders at a fixed proportion.
16:9
Hero media or video previews.
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add aspect-ratio to your project.
watermelon add aspect-ratio2
Import the component
Import Aspect Ratio from your local UI registry output.
Import
import { AspectRatio } from "@/components/ui/aspect-ratio";Import
Import
import { AspectRatio } from "@/components/ui/aspect-ratio";Usage
Use aspect ratio when a frame should scale responsively while keeping a predictable shape.
1:1 avatar crop
API Reference
| prop | type | default | description |
|---|---|---|---|
| ratio | number | 1 | Sets the width-to-height proportion for the container. |
| children | ReactNode | - | Rendered inside the constrained frame. |