Aspect Ratio

Displays content within a desired ratio.

Preview

Code

import AspectRatio from '@dinui/react/aspect-ratio'

export default function AspectRatioVariantDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
      />
    </AspectRatio>
  )
}

Without JS

Preview

Code

export default function AspectRatioTailwindOnlyDemo() {
  return (
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Photo by Drew Beamer"
      className="aspect-video rounded-md"
    />
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add aspect-ratio

   yarn

   yarn dlx @dinui/cli@latest add aspect-ratio

   pnpm

   pnpm dlx @dinui/cli@latest add aspect-ratio

   bun

   bunx @dinui/cli@latest add aspect-ratio

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-aspect-ratio

   yarn

   yarn add @radix-ui/react-aspect-ratio

   pnpm

   pnpm add @radix-ui/react-aspect-ratio

   bun

   bun add @radix-ui/react-aspect-ratio

3. Copy and paste the following code into your project

   'use client'
   
   import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
   
   const AspectRatio = AspectRatioPrimitive.Root
   
   export default AspectRatio
   export { AspectRatioPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.