1Sponsor

Aspect Ratio

Constrains children to a given aspect ratio

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/aspect-ratio.json

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";
<AspectRatio ratio={16 / 9} width={60}>
  <Text>Widescreen content</Text>
</AspectRatio>

API Reference

AspectRatio

PropTypeDefault
childrenReactNoderequired
rationumber16 / 9
widthnumber80