Simple Dropdown

Component

About

A sleek, reusable dropdown button with smooth animations and built-in dark mode support. Accepts custom trigger content and dynamic menu items with optional icons and actions. Built with Tailwind, ShadCN UI, and Framer Motion for a polished, modern experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Simple Dropdown to your project and fits it to your theme.

Code

How Simple Dropdown is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React, { useState } from "react";
import { SimpleDropdown, SimpleItem } from "@/components/ui/simple-dropdown";

export default function SimpleDemo() {
  const [selectedStatus, setSelectedStatus] = useState("all");

  const statusFilterItems: SimpleItem[] = [
    {
      value: "all",
      label: "All Status",
      onClick: () => setSelectedStatus("all"),
    },
    {
      value: "active",
      label: "Active",
      onClick: () => setSelectedStatus("active"),
    },
    {
      value: "pending",
      label: "Pending",
      onClick: () => setSelectedStatus("pending"),
    },
    {
      value: "inactive",
      label: "Inactive",
      onClick: () => setSelectedStatus("inactive"),
      divider: true,
    },
    {
      value: "archived",
      label: "Archived",
      onClick: () => setSelectedStatus("archived"),
    },
  ];

  const getDisplayLabel = (value: string) => {
    const item = statusFilterItems.find(item => item.value === value);
    return item?.label || value;
  };

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-8">
      <SimpleDropdown
        trigger={<span>Status: {getDisplayLabel(selectedStatus)}</span>}
        items={statusFilterItems}
        selectedValue={selectedStatus}
        position="bottom-left"
      />
    </div>
  );
}