Atoms

Aspect Ratio

Displays content within a desired ratio.

shadcn/uiBased on shadcn/ui with Formance brand styling.

16:9 Aspect Ratio

Installation#

npx shadcn@latest add @formance/aspect-ratio

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

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

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <img
      src="/images/ledger-dashboard.png"
      alt="Formance Ledger Dashboard"
      className="rounded-md object-cover"
    />
  </AspectRatio>
</div>