Dropdown Menu

npx shadcn@latest add https://ui.saasflare.io/r/dropdown-menu.json

pnpm add @saasflare/ui

"use client"import {    Button,    DropdownMenu,    DropdownMenuContent,    DropdownMenuItem,    DropdownMenuLabel,    DropdownMenuSeparator,    DropdownMenuShortcut,    DropdownMenuSub,    DropdownMenuSubContent,    DropdownMenuSubTrigger,    DropdownMenuTrigger,} from "@saasflare/ui"/** An account menu with grouped actions, a submenu, and a destructive item. */export function Demo() {    return (        <DropdownMenu>            <DropdownMenuTrigger asChild>                <Button variant="outline">Account</Button>            </DropdownMenuTrigger>            <DropdownMenuContent className="w-56" align="start">                <DropdownMenuLabel>My Account</DropdownMenuLabel>                <DropdownMenuSeparator />                <DropdownMenuItem>                    Profile <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>                </DropdownMenuItem>                <DropdownMenuItem>                    Billing <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>                </DropdownMenuItem>                <DropdownMenuSub>                    <DropdownMenuSubTrigger>Invite members</DropdownMenuSubTrigger>                    <DropdownMenuSubContent>                        <DropdownMenuItem>Email invite</DropdownMenuItem>                        <DropdownMenuItem>Copy invite link</DropdownMenuItem>                    </DropdownMenuSubContent>                </DropdownMenuSub>                <DropdownMenuSeparator />                <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>            </DropdownMenuContent>        </DropdownMenu>    )}

"use client"import { useState } from "react"import {    Button,    DropdownMenu,    DropdownMenuCheckboxItem,    DropdownMenuContent,    DropdownMenuLabel,    DropdownMenuSeparator,    DropdownMenuTrigger,} from "@saasflare/ui"/** A column-visibility menu driven by checkbox items with controlled state. */export function Demo() {    const [columns, setColumns] = useState({        status: true,        email: true,        lastSeen: false,    })    return (        <DropdownMenu>            <DropdownMenuTrigger asChild>                <Button variant="outline">Columns</Button>            </DropdownMenuTrigger>            <DropdownMenuContent className="w-48" align="start">                <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>                <DropdownMenuSeparator />                <DropdownMenuCheckboxItem                    checked={columns.status}                    onCheckedChange={(v) => setColumns((c) => ({ ...c, status: !!v }))}                >                    Status                </DropdownMenuCheckboxItem>                <DropdownMenuCheckboxItem                    checked={columns.email}                    onCheckedChange={(v) => setColumns((c) => ({ ...c, email: !!v }))}                >                    Email                </DropdownMenuCheckboxItem>                <DropdownMenuCheckboxItem                    checked={columns.lastSeen}                    onCheckedChange={(v) => setColumns((c) => ({ ...c, lastSeen: !!v }))}                >                    Last seen                </DropdownMenuCheckboxItem>            </DropdownMenuContent>        </DropdownMenu>    )}