GitHub
Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Loading...
Loading...

Installation

pnpm dlx shadcn-ng@latest add aspect-ratio
npx shadcn-ng@latest add aspect-ratio
npx shadcn-ng@latest add aspect-ratio
bunx --bun shadcn-ng@latest add aspect-ratio

Install the following dependencies:

pnpm add @radix-ng/primitives
npm install @radix-ng/primitives
yarn add @radix-ng/primitives
bun add @radix-ng/primitives

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

import { UbAspectRatioDirective } from "~/components/ui/aspect-ratio"
<div ubAspectRatio [ratio]="16 / 9">
  <img src="..." alt="Image" class="rounded-md object-cover" >
</div>