ContextQMD
Back to Shadcn Ui

Aspect Ratio

apps/v4/content/docs/components/radix/aspect-ratio.mdx

latest2.0 KB
Original Source
<ComponentPreview name="aspect-ratio-demo" styleName="radix-nova" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add aspect-ratio
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install radix-ui

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="aspect-ratio" title="components/ui/aspect-ratio.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
tsx
<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Examples

Square

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

<ComponentPreview name="aspect-ratio-square" styleName="radix-nova" />

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

<ComponentPreview name="aspect-ratio-portrait" styleName="radix-nova" previewClassName="h-96" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="aspect-ratio-rtl" direction="rtl" previewClassName="h-96" />

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

PropTypeDefaultRequired
rationumber-Yes
classNamestring-No

For more information, see the Radix UI documentation.