Primary usage
Wrap media in AspectRatio so it keeps a consistent shape regardless of the source file's dimensions.
Aspect Ratio
Displays content within a fixed aspect ratio.
$
Registry itembunx shadcn@latest add @nx-ui/aspect-ratioInstalls withutils
Common ratios
Site survey photography, drone stills and document scans each favour a different shape.
16 / 9
4 / 3
1 / 1
3 / 4
Interactive ratio
The ratio prop reads live from --ratio, so it can be driven by state — useful when a viewer lets users switch framing.
Loading state
Reserve the frame with AspectRatio while media loads, so surrounding content doesn't jump.
Video unavailable
Site report card
A realistic composition: a fixed-ratio cover photo above a remediation project summary.
Harrow Yard remediation
Former haulage depot — soil capping and drainage works
On trackWaste transfer: Phase 2Groundwater monitored
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
ratio* | number | — | — |
…extends React.ComponentProps<"div">