Aspect Ratio
Displays content within a desired ratio. Essential for maintaining consistent image shapes across responsive layouts.
$cookest-ui add aspect-ratio
16:9 Video
Standard widescreen ratio for recipe video thumbnails.
🍝Pasta Carbonara — Recipe Video16:9 · 8:24
1:1 Square
Square ratio for recipe card thumbnails and profile images.
🍕Margherita
🍜Ramen
🥗Salad
4:3 Classic
Traditional photo ratio — great for printed recipe cards.
🥩Beef Bourguignon4:3 aspect ratio
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | The desired aspect ratio. e.g. 16/9, 4/3, 1 (square), 9/16 (portrait). |
className | string | — | Custom classes applied to the outer container. |
children | ReactNode | — | Content to display within the ratio container. |