TWIGS

Aspect Ratio

Displays content within a desired aspect ratio.

Playground

16:9 frame

Installation

Install in any React + Tailwind project:

$npx shadcn@latest add https://twigs.globirdenergy.com.au/r/aspect-ratio.json

Source

The exact file the registry serves to consumers.

import * as React from 'react';
import { cn } from '@/lib/utils';

// Spec source: Figma "APP Re-design Phase 1" → page "Aspect Ratio ✅"
// radius 8 (rounded-lg), image fill — pure CSS aspect-ratio wrapper
function AspectRatio({
  ratio = 1,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & { ratio?: number }) {
  return (
    <div
      data-slot="aspect-ratio"
      className={cn('relative w-full overflow-hidden rounded-lg', className)}
      style={{ aspectRatio: ratio, ...style }}
      {...props}
    >
      {children}
    </div>
  );
}

export { AspectRatio };