Aspect Ratio

Maintains a consistent width-to-height ratio for content as it resizes.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/aspect-ratio/aspect-ratio.tsx

import { AspectRatio as AspectRatioPrimitive } from 'radix-ui'
import * as React from 'react'
import { type AspectRatioStyles, aspectRatioStyles } from './aspect-ratio.css'
 
interface AspectRatioProps
  extends Omit<React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>, 'ratio'>,
    Omit<AspectRatioStyles, 'ratio'> {
  ratio?: number | AspectRatioStyles['ratio']
}
 
const AspectRatio = React.forwardRef<
  React.ComponentRef<typeof AspectRatioPrimitive.Root>,
  AspectRatioProps
>(({ className, ratio, ...props }, forwardedRef) => {
  const variant = typeof ratio === 'string' ? ratio : 'custom'
  const numeric = typeof ratio === 'number' ? ratio : undefined
  return (
    <AspectRatioPrimitive.Root
      ref={forwardedRef}
      className={aspectRatioStyles({ ratio: variant, className })}
      ratio={numeric}
      {...props}
    />
  )
})
 
AspectRatio.displayName = 'AspectRatio'
 
export { AspectRatio }

Usage

Imports

import { AspectRatio } from '#/components/aspect-ratio'

Example

Browse the Storybook for more examples.

Anatomy

<AspectRatio />

On this page