ScrollX UI
uiaspect-ratiosource: ok · hit
Aspect Ratio
A responsive container component that maintains a fixed aspect ratio, commonly used for media like images and videos.
npx shadcn add "https://www.scrollxui.dev/registry/aspect-ratio.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightui-primitives@radix-ui/react-aspect-ratio
Files1 · source cached 10/9/2026, 4:14:13 AM
components/ui/aspect-ratio.tsx
"use client";
import * as React from "react";
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
import type { AspectRatioProps } from "@radix-ui/react-aspect-ratio";
const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
({ ratio = 16 / 9, className, ...props }, ref) => (
<AspectRatioPrimitive.Root
ref={ref}
ratio={ratio}
className={className}
{...props}
/>
)
);
AspectRatio.displayName = "AspectRatio";
export { AspectRatio };