Dropdown

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

"use client";

import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  DropdownSeparator,
  DropdownLabel,
} from "@kennbalino/kui";
import { Button } from "@kennbalino/kui";
import { User, Settings, LogOut } from "lucide-react";

export default function MyComponent() {
  return (
    <Dropdown>
      <DropdownTrigger>
        <Button variant="ghost">Open Menu ▾</Button>
      </DropdownTrigger>
      <DropdownMenu>
        <DropdownLabel>Account</DropdownLabel>
        <DropdownItem icon={<User size={14} />}>Profile</DropdownItem>
        <DropdownItem icon={<Settings size={14} />}>Settings</DropdownItem>
        <DropdownSeparator />
        <DropdownItem icon={<LogOut size={14} />} variant="danger">
          Logout
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

// Align options
<DropdownMenu align="start">Item 1</DropdownMenu>  // default
<DropdownMenu align="center">Item 2</DropdownMenu>
<DropdownMenu align="end">Item 3</DropdownMenu>

// Side options
<DropdownMenu side="bottom">Item 4</DropdownMenu>  // default
<DropdownMenu side="top">Item 5</DropdownMenu>

// Item variants
<DropdownItem variant="default">Default</DropdownItem>
<DropdownItem variant="danger">Danger</DropdownItem>
<DropdownItem variant="disabled">Disabled</DropdownItem>