snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/aria/examples/aspect-ratio-example.tsx

@@ -0,0 +1,90 @@
+import Image from "next/image"
+
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { AspectRatio } from "@/registry/bases/aria/ui/aspect-ratio"
+
+export default function AspectRatioExample() {
+  return (
+    <ExampleWrapper className="max-w-4xl 2xl:max-w-4xl">
+      <AspectRatio16x9 />
+      <AspectRatio21x9 />
+      <AspectRatio1x1 />
+      <AspectRatio9x16 />
+    </ExampleWrapper>
+  )
+}
+
+function AspectRatio16x9() {
+  return (
+    <Example title="16:9" className="items-center justify-center">
+      <AspectRatio
+        ratio={16 / 9}
+        className="rounded-lg bg-muted style-luma:rounded-3xl"
+      >
+        <Image
+          src="https://avatar.vercel.sh/shadcn1"
+          alt="Photo"
+          fill
+          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
+        />
+      </AspectRatio>
+    </Example>
+  )
+}
+
+function AspectRatio1x1() {
+  return (
+    <Example title="1:1" className="items-start">
+      <AspectRatio
+        ratio={1 / 1}
+        className="rounded-lg bg-muted style-luma:rounded-3xl"
+      >
+        <Image
+          src="https://avatar.vercel.sh/shadcn1"
+          alt="Photo"
+          fill
+          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
+        />
+      </AspectRatio>
+    </Example>
+  )
+}
+
+function AspectRatio9x16() {
+  return (
+    <Example title="9:16" className="items-center justify-center">
+      <AspectRatio
+        ratio={9 / 16}
+        className="rounded-lg bg-muted style-luma:rounded-3xl"
+      >
+        <Image
+          src="https://avatar.vercel.sh/shadcn1"
+          alt="Photo"
+          fill
+          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
+        />
+      </AspectRatio>
+    </Example>
+  )
+}
+
+function AspectRatio21x9() {
+  return (
+    <Example title="21:9" className="items-center justify-center">
+      <AspectRatio
+        ratio={21 / 9}
+        className="rounded-lg bg-muted style-luma:rounded-3xl"
+      >
+        <Image
+          src="https://avatar.vercel.sh/shadcn1"
+          alt="Photo"
+          fill
+          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
+        />
+      </AspectRatio>
+    </Example>
+  )
+}