Aspect Ratio

aspect-ratio ui

Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.

Also available for Vue ->

Installation

$ pnpm dlx shadcn@latest add https://uipkge.dev/r/react/aspect-ratio.json

$ npx shadcn@latest add https://uipkge.dev/r/react/aspect-ratio.json

$ yarn dlx shadcn@latest add https://uipkge.dev/r/react/aspect-ratio.json

$ bunx shadcn@latest add https://uipkge.dev/r/react/aspect-ratio.json

Named registry: npx shadcn@latest add @uipkge-react/aspect-ratio Installs to: components/ui/aspect-ratio/

Examples

npm dependencies

@radix-ui/react-aspect-ratio

Files installed (2)

components/ui/aspect-ratio/AspectRatio.tsx 0.5 kB

'use client'

import * as React from 'react'
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

const AspectRatio = React.forwardRef<
  React.ElementRef<typeof AspectRatioPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>
>(({ ...props }, ref) => (
  <AspectRatioPrimitive.Root ref={ref} data-uipkge="" data-slot="aspect-ratio" {...props} />
))
AspectRatio.displayName = 'AspectRatio'

export { AspectRatio }

components/ui/aspect-ratio/index.ts 0 kB

export { AspectRatio } from './AspectRatio'

Raw manifest: https://uipkge.dev/r/react/aspect-ratio.json