UIPackage
Vue React

Aspect Ratio

Vue layout
Edit on GitHub

Wraps 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 ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/aspect-ratio.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/aspect-ratio

Examples

Dependencies

reka-ui

Files (2)

  • app/components/ui/aspect-ratio/AspectRatio.vue 0.6 kB 
    <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>
  • app/components/ui/aspect-ratio/index.ts 0.1 kB 
    export { default as AspectRatio } from './AspectRatio.vue'

Raw manifest: https://uipkge.dev/r/vue/aspect-ratio.json