Layout

Aspect Ratio

Fixed-ratio containers.

Aspect Ratio

Fixed-ratio containers.

Layout

16 / 9 surface

Install

npx shadcn@latest add http://localhost:3000/r/aspect-ratio.json

Usage

"use client"

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function Example() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="w-full max-w-xs overflow-hidden rounded-xl bg-muted"
    >
      <div className="flex size-full items-center justify-center text-xs text-muted-foreground">
        16 / 9 surface
      </div>
    </AspectRatio>
  )
}

API

AspectRatio

function AspectRatio(props: React.ComponentProps<"div"> & { ratio: number })

Source code +

import { cn } from "cn"

function AspectRatio({
  ratio,
  className,
  ...props
}: React.ComponentProps<"div"> & { ratio: number }) {
  return (
    <div
      data-slot="aspect-ratio"
      style={
        {
          "--ratio": ratio,
        } as React.CSSProperties
      }
      className={cn("relative aspect-(--ratio)", className)}
      {...props}
    />
  )
}

export { AspectRatio }

Registry JSON ↗