optics
componentaspect-ratiosource: ok · hit
Aspect Ratio
Displays content within a desired ratio.
npx shadcn add "https://optics.agusmayol.com.ar/r/aspect-ratio.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightclsxtailwind-merge
Registry dependencies
https://optics.agusmayol.com.ar/r/utils.json
Files1 · source cached 10/8/2026, 3:40:19 PM
registry/optics/aspect-ratio.jsx
import { cn } from "@/lib/utils";
function AspectRatio({ ratio = 1, className = "", ...props }) {
return (
<div
data-slot="aspect-ratio"
style={{
"--ratio": ratio,
}}
className={cn("relative aspect-(--ratio)", className)}
{...props}
/>
);
}
AspectRatio.displayName = "AspectRatio";
export { AspectRatio };