Aspect Ratio
ReadyConstrains content to a ratio.
Requires radix-ui
16 / 9
Installation
$ npx @oratiq-js/ui add aspect-ratioCopies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.
Usage
import
import { AspectRatio } from "@/components/ui/aspect-ratio";Ratios
16 / 9
4 / 3
1 / 1
Reserves the space before the image loads, so the page doesn't shift — a direct Cumulative Layout Shift win.
View source on GitHub → components/ui/aspect-ratio.tsx