Aspect Ratio

A component for maintaining consistent aspect ratios, perfect for images, videos, and responsive containers.

Square Ratio

A perfect 1:1 square ratio, ideal for profile pictures, icons, and square cards.

1:1 Square

export function SquareAspect() {
  return (
    <div className="aspect-square w-full max-w-64 bg-neutral-800 border border-white/10 rounded-lg flex items-center justify-center">
      <span className="text-white text-sm">1:1 Square</span>
    </div>
  )
}

Video Ratio

A standard 16:9 video aspect ratio, perfect for video players, hero banners, and media content.

16:9 Video

export function VideoAspect() {
  return (
    <div className="aspect-video w-full bg-neutral-800 border border-white/10 rounded-lg flex items-center justify-center">
      <span className="text-white text-sm">16:9 Video</span>
    </div>
  )
}

Custom Ratio

Use custom aspect ratios with the aspect-[w/h] syntax for any specific proportions you need.

4:3 Custom

export function CustomAspect() {
  return (
    <div className="aspect-[4/3] w-full max-w-80 bg-neutral-800 border border-white/10 rounded-lg flex items-center justify-center">
      <span className="text-white text-sm">4:3 Custom</span>
    </div>
  )
}

Grid