{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aspect-ratio",
  "title": "Aspect Ratio",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A CSS-native ratio frame that reserves space for media and safely handles invalid ratio values.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/aspect-ratio.tsx",
      "content": "// Ballmac UI: Aspect Ratio. https://ui.ballmac.com/components/aspect-ratio\n// Based on shadcn/ui Aspect Ratio (MIT, Copyright (c) 2023 shadcn), adding a native CSS fallback for invalid ratios.\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype AspectRatioProps = React.ComponentProps<\"div\"> & {\n  /** Width divided by height. Defaults to 16:9. */\n  ratio?: number\n}\nfunction AspectRatio({\n  ratio = 16 / 9,\n  className,\n  style,\n  ...props\n}: AspectRatioProps) {\n  const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 16 / 9\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      className={cn(\n        \"relative w-full overflow-hidden rounded-[inherit] [&>*]:size-full\",\n        className,\n      )}\n      style={{ aspectRatio: safeRatio, ...style }}\n      {...props}\n    />\n  )\n}\nexport { AspectRatio, type AspectRatioProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/aspect-ratio.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "media",
      "image",
      "layout"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "A CSS-native ratio frame that reserves space for media and safely handles invalid ratio values.",
      "whenToUse": [
        "Reserve image or video space before it loads",
        "Keep cards aligned across a grid"
      ],
      "whenNotToUse": [
        "Use fixed height when cropping is intentional"
      ],
      "composesWith": [
        "card"
      ],
      "a11y": [],
      "customization": [
        "ratio: width divided by height; default 16/9"
      ]
    },
    "source": {
      "name": "shadcn/ui Aspect Ratio",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "aspect-ratio-demo",
      "aspect-ratio-states"
    ],
    "url": "https://ui.ballmac.com/components/aspect-ratio"
  },
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}