UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Aspect Ratio

aspect-ratioui
Boilerplate repo

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://uipkge.dev/r/react/aspect-ratio.json
Named registry:npx shadcn@latest add @uipkge-react/aspect-ratioInstalls to:components/ui/aspect-ratio/

Examples

Loading interactive previews…

Files installed (2)

  • components/ui/aspect-ratio/AspectRatio.tsx0.4 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.ts0 kB

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