# Aspect Ratio Keeps content at a fixed aspect ratio. Source: https://www.ui95.dev/components/aspect-ratio ## Examples ```tsx import Image from "next/image" import { AspectRatio } from "@/components/ui/aspect-ratio" import type { ShowcaseDemo } from "../types" const RATIOS = [ { label: "1:1", ratio: 1 }, { label: "4:3", ratio: 4 / 3 }, { label: "16:9", ratio: 16 / 9 }, ] as const export const demo: ShowcaseDemo = { span: "single", variants: [ ...RATIOS.map(({ label, ratio }) => ({ label, render: () => (

{label}

), })), { label: "image", render: () => (

), }, ], } ``` ## Installation ```bash npx shadcn@latest add https://www.ui95.dev/r/aspect-ratio.json ``` Run it in a Radix shadcn project that already has the UI95 theme. Dependencies: ```bash npm install cn radix-ui ``` `components/ui/aspect-ratio.tsx` ```tsx "use client" import { cn } from "cn" import { AspectRatio as AspectRatioPrimitive } from "radix-ui" import * as React from "react" function AspectRatio({ className, ...props }: React.ComponentProps) { return ( ) } export { AspectRatio } ``` ## API reference ### AspectRatio No props of its own. It forwards the props of the element or primitive it wraps.