You're looking at an early version of Chimera. All feedback is welcome, please submit through Github Issues!

Aspect Ratio

Displays content within a desired ratio.

Import

import { AspectRatio } from '@chimera-ui/components'

Usage

<div className="w-[300px]">
  <AspectRatio.Root ratio={1.7777777777777777}>
    <img
      alt="Photo by Alvaro Pinot"
      className="rounded-md object-cover w-full h-full"
      src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
    />
  </AspectRatio.Root>
</div>

Alert Dialog Avatar