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,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Bolt, BookOpen, CircleUserRound, Layers2, LogOut, Pin, UserPen } from "lucide-react";
function Component() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon" variant="outline" aria-label="Open account menu">
<CircleUserRound size={16} strokeWidth={2} aria-hidden="true" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-w-64">
<DropdownMenuLabel className="flex items-start gap-3">
<img
src="https://originui.com/avatar.jpg"
alt="Avatar"
width={32}
height={32}
className="shrink-0 rounded-full"
/>
<div className="flex min-w-0 flex-col">
<span className="truncate text-sm font-medium text-foreground">Keith Kennedy</span>
<span className="truncate text-xs font-normal text-muted-foreground">
k.kennedy@originui.com
</span>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Bolt size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Option 1</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Layers2 size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Option 2</span>
</DropdownMenuItem>
<DropdownMenuItem>
<BookOpen size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Option 3</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Pin size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Option 4</span>
</DropdownMenuItem>
<DropdownMenuItem>
<UserPen size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Option 5</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
<span>Logout</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { Component };