Components
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.
Loading preview...
"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>
);
}