Maintains a fixed width-to-height ratio for its children, regardless of screen size. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions.
ts
| Guidance | Practices |
|---|---|
| Do | Express the ratio as a fraction like |
| Do | Use for media that needs consistent proportions across screen sizes. |
| Don't | Use for general layout containers; use standard layout components instead. |
| Don't | Nest AspectRatio containers; one level is sufficient. |
Circular container via shape="ellipse" with ratio={1}, ideal for avatars and profile images.
1:1 square aspect ratio, ideal for avatars and Instagram-style images.
16:9 widescreen aspect ratio wrapping an image.
Aspect ratio container with a skeleton loading placeholder.