Aspect Ratio

PreviousNext

Displays content within a desired ratio.

Docs
opticscomponent

Preview

Loading preview…
registry/optics/aspect-ratio.jsx
import { cn } from "@/lib/utils"

function AspectRatio({
  ratio = 1,
  className = "",
  ...props
}) {
  return (
    <div
      data-slot="aspect-ratio"
      style={
        {
          "--ratio": ratio
        }
      }
      className={cn("relative aspect-(--ratio)", className)}
      {...props} />
  );
}

export { AspectRatio }

Installation

npx shadcn@latest add @optics/aspect-ratio

Usage

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