Components
Loading preview...
Enhanced shadcn/ui dropdown menu
npx shadcn@latest add https://21st.dev/r/originui/dropdown-menuimport { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Info } from "lucide-react";
import { Book, LifeBuoy, MessageCircleMore } from "lucide-react";
function Component() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
variant="ghost"
className="rounded-full shadow-none"
aria-label="Open edit menu"
>
<Info size={16} strokeWidth={2} aria-hidden="true" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="pb-2">
<DropdownMenuLabel>Need help?</DropdownMenuLabel>
<DropdownMenuItem
className="cursor-pointer py-1 focus:bg-transparent focus:underline"
asChild
>
<a href="#">
<Book size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Documentation
</a>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer py-1 focus:bg-transparent focus:underline"
asChild
>
<a href="#">
<LifeBuoy size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Support
</a>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer py-1 focus:bg-transparent focus:underline"
asChild
>
<a href="#">
<MessageCircleMore
size={16}
strokeWidth={2}
className="opacity-60"
aria-hidden="true"
/>
Contact us
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { Component };