blode
uiaspect-ratiosource: ok · hit
Aspect Ratio
A component that maintains a consistent width-to-height ratio.
npx shadcn add "https://blode.co/ui/r/aspect-ratio.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightui-primitives@base-ui/react
Files1 · source cached 10/9/2026, 4:38:24 PM
ui/aspect-ratio.tsx
"use client";
import type * as React from "react";
import { cn } from "@/lib/utils";
const AspectRatio = ({
ratio,
className,
style,
...props
}: React.ComponentProps<"div"> & { ratio: number }) => (
<div
className={cn("relative aspect-(--ratio) aspect-[var(--ratio)]", className)}
data-slot="aspect-ratio"
style={
{
"--ratio": ratio,
...style,
} as React.CSSProperties
}
{...props}
/>
);
export { AspectRatio };