Components
Aspect Ratio
A aspect-ratio component
Preview
Loading...
import Image from "next/image";import { AspectRatio } from "@/registry/axon/ui/aspect-ratio";export default function AspectRatioDemo() { return ( <AspectRatio className="rounded-lg bg-muted" ratio={16 / 9}> <Image alt="Photo by Drew Beamer" className="mt-0 mb-0 h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale" fill src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80" /> </AspectRatio> );}Installation
CLI
npx shadcn@latest add @emberui/aspect-ratioyarn shadcn@latest add @emberui/aspect-ratiopnpm dlx shadcn@latest add @emberui/aspect-ratiobunx --bun shadcn@latest add @emberui/aspect-ratioReference
This component is based on the shadcn/ui Aspect Ratio component.