{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "aspect-ratio",
  "title": "Aspect Ratio",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/aspect-ratio/AspectRatio.vue",
      "content": "<script setup lang=\"ts\">\nimport type { AspectRatioProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { AspectRatio } from 'reka-ui'\n\n// CLAUDE.md mandate: bare `defineProps<RekaUiX>()` can bail under Vue 3.5+\n// because reka-ui has no exports.types. The intersection form delegates\n// type extraction to TS via the installed typescript package.\nconst props = defineProps<AspectRatioProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <AspectRatio v-slot=\"slotProps\" data-uipkge data-slot=\"aspect-ratio\" v-bind=\"props\">\n    <slot v-bind=\"slotProps\" />\n  </AspectRatio>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/aspect-ratio/AspectRatio.vue"
    },
    {
      "path": "packages/registry-vue/components/aspect-ratio/index.ts",
      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/aspect-ratio/index.ts"
    }
  ],
  "dependencies": [
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "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.",
  "categories": [
    "layout"
  ]
}