Components
Loading preview...
Enhanced shadcn/ui dropdown menu
npx shadcn@latest add https://21st.dev/r/originui/dropdown-menu"use client";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ArchiveRestore, ChevronDown, Plus, Share2, Trash } from "lucide-react";
import { useState } from "react";
function Component() {
const [framework, setFramework] = useState("nextjs");
const [emailNotifications, setEmailNotifications] = useState(false);
const [pushNotifications, setPushNotifications] = useState(true);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Rich menu with icons
<ChevronDown
className="-me-1 ms-2 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>
<Plus size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>New</span>
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger inset>Framework</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuRadioGroup value={framework} onValueChange={setFramework}>
<DropdownMenuRadioItem value="nextjs">Next.js</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="sveltekit" disabled>
SvelteKit
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="remix">Remix</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="astro">Astro</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger inset>Notifications</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuCheckboxItem
checked={emailNotifications}
onCheckedChange={setEmailNotifications}
>
Email
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={pushNotifications}
onCheckedChange={setPushNotifications}
>
Push
</DropdownMenuCheckboxItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Share2 size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Share</span>
</DropdownMenuItem>
<DropdownMenuItem>
<ArchiveRestore size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Archive</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive focus:text-destructive">
<Trash size={16} strokeWidth={2} aria-hidden="true" />
<span>Delete</span>
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { Component };