Components
Aspect Ratio
Constrains its content to a fixed width-to-height ratio, keeping images, video, and embeds from shifting layout as they load.
Basic usage
Wrap any element and pass a ratio. The child fills the box at all widths — give it h-full w-full.
Common ratios
Any numeric ratio works — square, classic photo, and widescreen are the most common.
1 / 1
4 / 3
16 / 9
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Desired width-to-height ratio, expressed as a number (e.g. 16 / 9). The single child is sized to fill this box. |
childrenrequired | React.ReactNode | — | The content to constrain — typically an img, video, or div. Should stretch to fill (h-full w-full). |
className | string | — | Additional Tailwind classes to merge onto the wrapper. |
...rest | HTMLAttributes<HTMLDivElement> | — | All native div props are forwarded to the wrapper element. |
Accessibility
- Aspect Ratio is a purely presentational wrapper — it adds no roles or ARIA and never traps focus.
- Reserving space ahead of load prevents content from jumping, which reduces cumulative layout shift and is friendlier to users with motion sensitivity.
- Always provide a meaningful
alton wrapped images, or an accessible title on embedded iframes and video. - The wrapper does not clip overflow on its own — apply
overflow-hiddenorrounded-*on the child when needed.