BaseCN
uiaspect-ratiosource: ok · hit
Aspect Ratio
Displays content within a desired ratio.
npx shadcn add "https://basecn.dev/r/aspect-ratio.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 2:11:30 PM
src/registry/components/ui/aspect-ratio.tsx
import { cn } from "@/lib/utils";
interface AspectRatioProps extends React.ComponentProps<"div"> {
ratio: number;
}
function AspectRatio({
ratio,
className,
children,
...props
}: AspectRatioProps) {
return (
<div
data-slot="aspect-ratio-wrapper"
className="relative w-full"
style={{ paddingBottom: `${(1 / ratio) * 100}%` }}
>
<div
data-slot="aspect-ratio"
className={cn("absolute inset-0", className)}
{...props}
>
{children}
</div>
</div>
);
}
export { AspectRatio };