@aristobyte-ui/dropdown

@aristobyte-ui/dropdown

A fully typed, modular, and composable Dropdown component built for AristoByteUI, leveraging Button for interactive triggers and providing lightweight, performant, and flexible menus for React applications.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/dropdown

# Or via npm
npm install -D @aristobyte-ui/dropdown

# Or via pnpm
pnpm add -D @aristobyte-ui/dropdown

🛠 Usage

import { Dropdown } from "@aristobyte-ui/dropdown";
import { Button } from "@aristobyte-ui/button";

export default function Example() {
  return (
    <Dropdown
      trigger={<Button variant="primary">Options</Button>}
      items={[
        { label: "Profile", onClick: () => console.log("Profile clicked") },
        { label: "Settings", onClick: () => console.log("Settings clicked") },
        { label: "Logout", onClick: () => console.log("Logout clicked") },
      ]}
      placement="bottom-start"
      disabled={false}
    />
  );
}

##📂 Presets Available

• trigger: Any React element, commonly a Button, to toggle the dropdown.
• items: Array of menu items, each with label, optional icon, and onClick callback.
• placement: Positioning of the dropdown menu (e.g., top, bottom, left, right with variations like -start or -end).
• disabled: Boolean to disable the dropdown trigger.

🔧 Example in a Package

import { Dropdown } from "@aristobyte-ui/dropdown";
import { Button } from "@aristobyte-ui/button";
import { FiSettings, FiUser } from "react-icons/fi";

export function UserMenu() {
  return (
    <Dropdown
      trigger={
        <Button variant="secondary" appearance="outline">
          Menu
        </Button>
      }
      items={[
        {
          label: "Profile",
          icon: FiUser,
          onClick: () => console.log("Profile"),
        },
        {
          label: "Settings",
          icon: FiSettings,
          onClick: () => console.log("Settings"),
        },
        { label: "Logout", onClick: () => console.log("Logout") },
      ]}
      placement="bottom-end"
    />
  );
}

📊 Why This Matters

• Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
• Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
• AristoByteUI ready: Seamlessly integrates with design tokens, SCSS modules, and Button component composition.
• Flexible: Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and nested menu structures.

🏆 Philosophy

• Modular architecture: Dropdown component is fully composable with Button and other interactive elements.
• Declarative styling: SCSS modules keep styles maintainable and scoped.
• Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
• Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase