components

Aspect Ratio

Displays content with a desired ratio

Source CodeRadix UI
Aspect Ratio Preview

Installation

pnpm dlx radianui@latest add aspect-ratio

Usage

Imports

/components/ui/aspect-ratio.tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"

Code

/components/ui/aspect-ratio.tsx
<AspectRatio ratio={16 / 9}>
	<Image src="/media/background-2.png" alt="Example" fill />
</AspectRatio>