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/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { AspectRatio as AspectRatioPrimitive } from "@sprawlify/solid/aspect-ratio";2import type { ComponentProps } from "solid-js";34function AspectRatio(props: ComponentProps<typeof AspectRatioPrimitive.Root>) {5 return (6 <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props}>7 <AspectRatioPrimitive.Content data-slot="aspect-ratio-content">8 {props.children}9 </AspectRatioPrimitive.Content>10 </AspectRatioPrimitive.Root>11 );12}1314export { AspectRatio };15Update the import paths to match your project setup.
Usage
1import { AspectRatio } from "@/components/ui/aspect-ratio"1<AspectRatio ratio={16 / 9} class="bg-muted">
2 <img src="..." class="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.