Shadow Panda
Shadow Panda
Component
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

shadcn/uiRadix UIAPI Reference
Photo by Drew Beamer

Installation

Install the following dependencies

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

Copy and paste the following code into your project

components/ui/aspect-ratio/index.tsx
'use client'
 
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
import { styled } from '@shadow-panda/styled-system/jsx'
 
export const AspectRatio = styled(AspectRatioPrimitive.Root)

Update the import paths to match your project setup

Usage

import Image from 'next/image'
import { css } from '@shadow-panda/styled-system/css'
import { AspectRatio } from '@/components/ui/aspect-ratio'
<div className={css({ width: '450px' })}>
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="..." className={css({ rounded: 'md', objectFit: 'cover' })} />
  </AspectRatio>
</div>
Alert DialogAvatar