Aspect Ratio
Constrains a child to a fixed width-to-height ratio, for media and chart containers.
eu-west-1 · rack 04Cluster topology preview
Install
pnpm dlx shadcn@latest add @namche/aspect-ratioUsage
import { AspectRatio } from '@/components/ui/aspect-ratio';
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg bg-muted">
<img src="/clusters/eu-west-1.png" alt="Cluster topology" className="size-full object-cover" />
</AspectRatio>ratio is a required numeric prop (width divided by height) rather than a
Tailwind class, since it's set as the --ratio CSS variable the component
reads from. AspectRatio itself only sizes the box — clip children with
overflow-hidden and give an <img> size-full object-cover to fill it.