Displays content within a desired ratio.
1import { AspectRatio } from "@/components/ui/aspect-ratio";23export default function Preview() {4 return (Installation
pnpm dlx sprawlify@latest add aspect-rationpx sprawlify@latest add aspect-ratioyarn sprawlify@latest add aspect-ratiobunx --bun sprawlify@latest add aspect-ratio
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import { AspectRatio as AspectRatioPrimitive } from "@sprawlify/react/aspect-ratio";45function AspectRatio({6 children,7 ...props8}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {9 return (10 <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props}>11 <AspectRatioPrimitive.Content data-slot="aspect-ratio-content">12 {children}13 </AspectRatioPrimitive.Content>14 </AspectRatioPrimitive.Root>15 );16}1718export { AspectRatio };19Update the import paths to match your project setup.
Usage
1import { AspectRatio } from "@/components/ui/aspect-ratio"1<AspectRatio ratio={16 / 9} className="bg-muted">
2 <img src="..." className="size-full rounded-md object-cover" />
3</AspectRatio>Examples
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
1import { AspectRatio } from "@/components/ui/aspect-ratio";23export default function Preview() {4 return (Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
1import { AspectRatio } from "@/components/ui/aspect-ratio";23export default function Preview() {4 return (Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.