Aspect Ratio
Surfaces bits-uiHold content to a fixed ratio.
Example
16 / 9
<script lang="ts">
import { AspectRatio } from '$lib/components/ui/aspect-ratio';
</script>
<div class="w-full max-w-md">
<AspectRatio ratio={16 / 9}>
<div
class="flex size-full items-center justify-center rounded-xl gradient-primary gloss shadow-bevel"
>
<span class="relative z-10 text-sm font-semibold text-primary-foreground">16 / 9</span>
</div>
</AspectRatio>
</div>Installation
npx shadcn-svelte@latest add https://mizu-ui.com/r/aspect-ratio.json