Components

Aspect Ratio

Displays content within a desired ratio.

Installation#

Install the dependencies
```
npm install radix-ui
```

Copy the source into your project

components/ui/aspect-ratio.tsx

"use client"import { AspectRatio as AspectRatioPrimitive } from "radix-ui"function AspectRatio({  ...props}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />}export { AspectRatio }

Make sure the foundation is in place
Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#

Portrait

Square