Skip to content
Perimeter Style

Aspect Ratio

Displays content within a desired ratio.

Usage

tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

<Aspect Ratio ratio={1.7777777777777777}>...</Aspect Ratio>
<Aspect Ratio ratio={1.7777777777777777}>...</Aspect Ratio>

Light

Dark

Default

Metrics

Perimeter Api

Aspect Ratio Controls

ratio

Examples

16:9

16:9

1:1 Square

1:1

4:3

4:3

Installation

Install
$ pnpm dlx shadcn@latest add @perimeter/aspect-ratio

Search

Search for components, templates, and more.