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,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown } from "lucide-react";
function Component() {
return (
<div className="min-w-[300px]">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Same width of trigger
<ChevronDown
className="-me-1 ms-2 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[--radix-dropdown-menu-trigger-width]">
<DropdownMenuItem>Option 1</DropdownMenuItem>
<DropdownMenuItem>Option 2</DropdownMenuItem>
<DropdownMenuItem>Option 3</DropdownMenuItem>
<DropdownMenuItem>Option 4</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
export { Component };