aspect-ratiouiWraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/aspect-ratio.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/aspect-ratio.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/aspect-ratio.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/aspect-ratio.jsonnpx shadcn-vue@latest add @uipkge/aspect-ratioInstalls to:app/components/ui/aspect-ratio/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
<script setup lang="ts">
import type { AspectRatioProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { AspectRatio } from 'reka-ui'
// CLAUDE.md mandate: bare `defineProps<RekaUiX>()` can bail under Vue 3.5+
// because reka-ui has no exports.types. The intersection form delegates
// type extraction to TS via the installed typescript package.
const props = defineProps<AspectRatioProps & { class?: HTMLAttributes['class'] }>()
</script>
<template>
<AspectRatio v-slot="slotProps" data-uipkge data-slot="aspect-ratio" v-bind="props">
<slot v-bind="slotProps" />
</AspectRatio>
</template>
export { default as AspectRatio } from './AspectRatio.vue'
Raw manifest:https://uipkge.dev/r/vue/aspect-ratio.json
