Components
Loading preview...
A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.
npx shadcn@latest add https://21st.dev/r/coss.com/menu"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuCheckboxItem, MenuTrigger } from "@/components/ui/component";
export default function MenuWithSwitchDemo() {
const [notifications, setNotifications] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [autoSave, setAutoSave] = useState(true);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-black p-8">
<Menu>
<MenuTrigger render={<Button variant="outline">Settings</Button>} />
<MenuPopup className="w-52">
<MenuCheckboxItem variant="switch" checked={notifications} onCheckedChange={(v) => setNotifications(!!v)}>Notifications</MenuCheckboxItem>
<MenuCheckboxItem variant="switch" checked={darkMode} onCheckedChange={(v) => setDarkMode(!!v)}>Dark Mode</MenuCheckboxItem>
<MenuCheckboxItem variant="switch" checked={autoSave} onCheckedChange={(v) => setAutoSave(!!v)}>Auto Save</MenuCheckboxItem>
</MenuPopup>
</Menu>
</div>
);
}