Displays content within a desired ratio.
1<script lang="ts">
2import { AspectRatio } from "@/components/ui/aspect-ratio"
3</script>
4
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/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script lang="ts">
2import { AspectRatio as AspectRatioPrimitive } from "@sprawlify/svelte/aspect-ratio"
3import type { ComponentProps } from "svelte";
4
5interface Props extends ComponentProps<typeof AspectRatioPrimitive.Root> {}
6
7let { children, ...rest }: Props = $props()
8</script>
9
10<AspectRatioPrimitive.Root data-slot="aspect-ratio" {...rest}>
11 <AspectRatioPrimitive.Content data-slot="aspect-ratio-content">
12 {@render children?.()}
13 </AspectRatioPrimitive.Content>
14</AspectRatioPrimitive.Root>1export { default as AspectRatio } from "./aspect-ratio.svelte";2Update 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.
1<script lang="ts">
2import { AspectRatio } from "@/components/ui/aspect-ratio"
3</script>
4
Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
1<script lang="ts">
2import { AspectRatio } from "@/components/ui/aspect-ratio"
3</script>
4
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.