Aspect Ratio
Keeps media at a fixed width-to-height ratio. Optionally wrap content in a sketch frame.
Media slot
<AspectRatio ratio={16 / 9} bordered roughness={1.5}>
<img src="..." alt="" />
</AspectRatio>CLI install
npx doodleui-react add aspect-ratio
Usage
import { AspectRatio } from "doodleui-react";
<AspectRatio ratio={16 / 9} bordered>
<img src="/photo.jpg" alt="Studio" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
</AspectRatio>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| ratio | number | 16 / 9 | Width divided by height for the content box. |
| bordered | boolean | false | Wrap content in a hand-drawn SketchBox frame. |
| animate | boolean | true | Draw-in the frame when bordered is true. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |