Aspect Ratio

Copy Markdown

Wrapper that maintains aspect ratio for content.

PreviewCode

1:1

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/aspect-ratio

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

<AspectRatio>
  
</AspectRatio>

PreviewCode

1:1

PreviewCode

9:16

PreviewCode

16:9

Use [--ratio:*] with breakpoints to change the ratio at different screen sizes.

PreviewCode

16:9 → 1:1

You can use breakpoint utilities to change the aspect ratio at different screen sizes.

md:[--ratio:16/9] lg:[--ratio:16/9]

Root component.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

Attribute	Description
`--ratio`	`1`

[

Announcement ](/docs/components/announcement)[

Autocomplete ](/docs/components/autocomplete)

On This Page