{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "aspect-ratio",
  "title": "Aspect Ratio",
  "author": "Matthew Blode",
  "description": "A component that maintains a consistent width-to-height ratio.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/aspect-ratio.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst AspectRatio = ({\n  ratio,\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) => (\n  <div\n    className={cn(\"relative aspect-(--ratio) aspect-[var(--ratio)]\", className)}\n    data-slot=\"aspect-ratio\"\n    style={\n      {\n        \"--ratio\": ratio,\n        ...style,\n      } as React.CSSProperties\n    }\n    {...props}\n  />\n);\n\nexport { AspectRatio };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}