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, ChevronDown, CopyPlus, Files, Layers2, Trash } from "lucide-react";
function Component() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Labeled grouped items
<ChevronDown
className="-me-1 ms-2 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Label</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem>
<CopyPlus size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Copy
</DropdownMenuItem>
<DropdownMenuItem>
<Bolt size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Edit
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuLabel>Label</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem>
<Layers2 size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Group
</DropdownMenuItem>
<DropdownMenuItem>
<Files size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
Clone
</DropdownMenuItem>
<DropdownMenuItem className="text-destructive focus:text-destructive">
<Trash size={16} strokeWidth={2} aria-hidden="true" />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { Component };