cubby-ui
uiaspect-ratiosource: ok · hit
Aspect-ratio
A aspect-ratio component.
npx shadcn add "https://www.cubby-ui.dev/r/aspect-ratio.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/13/2026, 10:29:26 PM
registry/default/aspect-ratio/aspect-ratio.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
ratio?: number | `${number}/${number}`;
}
function AspectRatio({
children,
className,
ratio = 1,
style,
...props
}: AspectRatioProps) {
const aspectRatio =
typeof ratio === "string"
? ratio
.split("/")
.map(Number)
.reduce((a, b) => a / b)
: ratio;
return (
<div
data-slot="aspect-ratio"
style={{
...style,
aspectRatio: aspectRatio.toString(),
}}
className={cn("w-full", className)}
{...props}
>
{children}
</div>
);
}
export { AspectRatio };