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

apps/v4/registry/new-york-v4/examples/item-image.tsx

@@ -0,0 +1,65 @@
+import Image from "next/image"
+
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/new-york-v4/ui/item"
+
+const music = [
+  {
+    title: "Midnight City Lights",
+    artist: "Neon Dreams",
+    album: "Electric Nights",
+    duration: "3:45",
+  },
+  {
+    title: "Coffee Shop Conversations",
+    artist: "The Morning Brew",
+    album: "Urban Stories",
+    duration: "4:05",
+  },
+  {
+    title: "Digital Rain",
+    artist: "Cyber Symphony",
+    album: "Binary Beats",
+    duration: "3:30",
+  },
+]
+
+export default function ItemImage() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-6">
+      <ItemGroup className="gap-4">
+        {music.map((song) => (
+          <Item key={song.title} variant="outline" asChild role="listitem">
+            <a href="#">
+              <ItemMedia variant="image">
+                <Image
+                  src={`https://avatar.vercel.sh/${song.title}`}
+                  alt={song.title}
+                  width={32}
+                  height={32}
+                  className="object-cover grayscale"
+                />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle className="line-clamp-1">
+                  {song.title} -{" "}
+                  <span className="text-muted-foreground">{song.album}</span>
+                </ItemTitle>
+                <ItemDescription>{song.artist}</ItemDescription>
+              </ItemContent>
+              <ItemContent className="flex-none text-center">
+                <ItemDescription>{song.duration}</ItemDescription>
+              </ItemContent>
+            </a>
+          </Item>
+        ))}
+      </ItemGroup>
+    </div>
+  )
+}