UIPackage
Vue React

Aspect Ratio

React layout
Edit on GitHub

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/aspect-ratio

Examples

Dependencies

@radix-ui/react-aspect-ratio

Files (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://react.uipkge.dev/r/react/aspect-ratio.json