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

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

@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronDownIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/new-york-v4/ui/item"
+
+const people = [
+  {
+    username: "shadcn",
+    avatar: "https://github.com/shadcn.png",
+    email: "shadcn@vercel.com",
+  },
+  {
+    username: "maxleiter",
+    avatar: "https://github.com/maxleiter.png",
+    email: "maxleiter@vercel.com",
+  },
+  {
+    username: "evilrabbit",
+    avatar: "https://github.com/evilrabbit.png",
+    email: "evilrabbit@vercel.com",
+  },
+]
+
+export default function ItemDropdown() {
+  return (
+    <div className="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="w-fit">
+            Select <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-72 [--radius:0.65rem]" align="end">
+          {people.map((person) => (
+            <DropdownMenuItem key={person.username} className="p-0">
+              <Item size="sm" className="w-full p-2">
+                <ItemMedia>
+                  <Avatar className="size-8">
+                    <AvatarImage src={person.avatar} className="grayscale" />
+                    <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                </ItemMedia>
+                <ItemContent className="gap-0.5">
+                  <ItemTitle>{person.username}</ItemTitle>
+                  <ItemDescription>{person.email}</ItemDescription>
+                </ItemContent>
+              </Item>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}