Command

npx shadcn@latest add https://ui.saasflare.io/r/command.json

pnpm add @saasflare/ui

"use client"import {    Command,    CommandEmpty,    CommandGroup,    CommandInput,    CommandItem,    CommandList,    CommandSeparator,    CommandShortcut,} from "@saasflare/ui/command"/** An inline, searchable command palette grouped by section. */export function Demo() {    return (        <Command className="w-80 rounded-lg border shadow-sm">            <CommandInput placeholder="Type a command or search…" />            <CommandList>                <CommandEmpty>No results found.</CommandEmpty>                <CommandGroup heading="Navigation">                    <CommandItem>                        Go to Dashboard <CommandShortcut>⌘D</CommandShortcut>                    </CommandItem>                    <CommandItem>                        Go to Members <CommandShortcut>⌘M</CommandShortcut>                    </CommandItem>                    <CommandItem>Go to Billing</CommandItem>                </CommandGroup>                <CommandSeparator />                <CommandGroup heading="Actions">                    <CommandItem>                        Invite teammate <CommandShortcut>⌘I</CommandShortcut>                    </CommandItem>                    <CommandItem>Create API key</CommandItem>                    <CommandItem>View changelog</CommandItem>                </CommandGroup>            </CommandList>        </Command>    )}

"use client"import { useEffect, useState } from "react"import { Button } from "@saasflare/ui"import {    CommandDialog,    CommandEmpty,    CommandGroup,    CommandInput,    CommandItem,    CommandList,    CommandSeparator,} from "@saasflare/ui/command"/** A modal command palette opened by a button or the ⌘K shortcut. */export function Demo() {    const [open, setOpen] = useState(false)    useEffect(() => {        const onKeyDown = (e: KeyboardEvent) => {            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {                e.preventDefault()                setOpen((o) => !o)            }        }        document.addEventListener("keydown", onKeyDown)        return () => document.removeEventListener("keydown", onKeyDown)    }, [])    return (        <>            <Button variant="outline" onClick={() => setOpen(true)}>                Search… ⌘K            </Button>            <CommandDialog open={open} onOpenChange={setOpen}>                <CommandInput placeholder="Search the workspace…" />                <CommandList>                    <CommandEmpty>No results found.</CommandEmpty>                    <CommandGroup heading="Projects">                        <CommandItem onSelect={() => setOpen(false)}>                            Production API                        </CommandItem>                        <CommandItem onSelect={() => setOpen(false)}>                            Marketing Site                        </CommandItem>                    </CommandGroup>                    <CommandSeparator />                    <CommandGroup heading="Settings">                        <CommandItem onSelect={() => setOpen(false)}>                            Team members                        </CommandItem>                        <CommandItem onSelect={() => setOpen(false)}>                            Billing & plans                        </CommandItem>                    </CommandGroup>                </CommandList>            </CommandDialog>        </>    )}