Command

1import {
2    FilePlus2,
3    FolderOpen,
4    Settings,
5    Share2,
6    ShieldCheck,
7    Trash2,
8    Upload,
9    Users,
10} from 'lucide-react'
11
12import {
13    Command,
14    CommandEmpty,
15    CommandGroup,
16    CommandInput,
17    CommandItem,
18    CommandList,
19    CommandSeparator,
20    CommandShortcut,
21} from '@/components/ui/command'
22
23export function CommandDemo() {
24    return (
25        <Command className="border-border rounded-lg border shadow-md md:min-w-[450px]">
26            <CommandInput placeholder="Search projects or actions..." />
27            <CommandList>
28                <CommandEmpty>No matches found.</CommandEmpty>
29                <CommandGroup heading="Projects">
30                    <CommandItem>
31                        <FolderOpen />
32                        <span>Open Project</span>
33                        <CommandShortcut>⌘O</CommandShortcut>
34                    </CommandItem>
35                    <CommandItem>
36                        <FilePlus2 />
37                        <span>New Project</span>
38                        <CommandShortcut>⌘N</CommandShortcut>
39                    </CommandItem>
40                    <CommandItem disabled>
41                        <Upload />
42                        <span>Import Project</span>
43                        <CommandShortcut>⇧U</CommandShortcut>
44                    </CommandItem>
45                </CommandGroup>
46                <CommandSeparator />
47                <CommandGroup heading="Collaboration">
48                    <CommandItem>
49                        <Share2 />
50                        <span>Share Link</span>
51                        <CommandShortcut>⌘L</CommandShortcut>
52                    </CommandItem>
53                    <CommandItem>
54                        <Users />
55                        <span>Manage Members</span>
56                        <CommandShortcut>⌘M</CommandShortcut>
57                    </CommandItem>
58                </CommandGroup>
59                <CommandSeparator />
60
61                <CommandGroup heading="Admin Tools">
62                    <CommandItem>
63                        <Settings />
64                        <span>Workspace Settings</span>
65                        <CommandShortcut>⌘,</CommandShortcut>
66                    </CommandItem>
67                    <CommandItem>
68                        <ShieldCheck />
69                        <span>Security Center</span>
70                    </CommandItem>
71                    <CommandItem disabled>
72                        <Trash2 />
73                        <span>Delete Workspace (Disabled)</span>
74                    </CommandItem>
75                </CommandGroup>
76            </CommandList>
77        </Command>
78    )
79}
80

1'use client'
2
3import * as React from 'react'
4import { FileIcon, SettingsIcon, UserIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import {
8    CommandDialog,
9    CommandEmpty,
10    CommandGroup,
11    CommandInput,
12    CommandItem,
13    CommandList,
14} from '@/components/ui/command'
15
16export function CommandDialogExample() {
17    const [open, setOpen] = React.useState(false)
18
19    React.useEffect(() => {
20        const down = (e: KeyboardEvent) => {
21            if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
22                e.preventDefault()
23                setOpen((open) => !open)
24            }
25        }
26        document.addEventListener('keydown', down)
27        return () => document.removeEventListener('keydown', down)
28    }, [])
29
30    return (
31        <>
32            <Button
33                onClick={() => setOpen(true)}
34                variant={'outline'}
35                className="px-2"
36            >
37                Press{' '}
38                <kbd className="text-primary border-border pointer-events-none inline-flex items-center gap-1 rounded border bg-gray-100 px-1.5 pt-0.5 font-mono text-[13px]/4 font-medium opacity-100 select-none">
39                    <span className="inline-block align-middle text-lg/4">
40                        ⌘
41                    </span>
42                    K
43                </kbd>
44            </Button>
45
46            {open && (
47                <CommandDialog open={open} onOpenChange={setOpen}>
48                    <CommandInput
49                        placeholder="Type a command or search..."
50                        className="pr-7"
51                    />
52                    <CommandList>
53                        <CommandEmpty>No results found.</CommandEmpty>
54                        <CommandGroup heading="Suggestions">
55                            <CommandItem>
56                                <FileIcon />
57                                New File
58                            </CommandItem>
59                            <CommandItem>
60                                <UserIcon />
61                                Profile
62                            </CommandItem>
63                            <CommandItem>
64                                <SettingsIcon />
65                                Settings
66                            </CommandItem>
67                        </CommandGroup>
68                    </CommandList>
69                </CommandDialog>
70            )}
71        </>
72    )
73}
74

1'use client'
2
3import { LogOutIcon, MoonIcon, SunIcon } from 'lucide-react'
4
5import {
6    Command,
7    CommandEmpty,
8    CommandGroup,
9    CommandInput,
10    CommandItem,
11    CommandList,
12    CommandSeparator,
13} from '@/components/ui/command'
14
15export function CommandSeparatorExample() {
16    return (
17        <Command className="border-border rounded-lg border shadow-md md:min-w-[450px]">
18            <CommandInput placeholder="Quick actions..." />
19            <CommandList>
20                <CommandEmpty>No results found.</CommandEmpty>
21                <CommandGroup heading="Appearance">
22                    <CommandItem>
23                        <SunIcon />
24                        Light Mode
25                    </CommandItem>
26                    <CommandItem>
27                        <MoonIcon />
28                        Dark Mode
29                    </CommandItem>
30                </CommandGroup>
31                <CommandSeparator />
32                <CommandGroup heading="Account">
33                    <CommandItem>
34                        <LogOutIcon />
35                        Logout
36                    </CommandItem>
37                </CommandGroup>
38            </CommandList>
39        </Command>
40    )
41}
42

1'use client'
2
3import {
4    Command,
5    CommandEmpty,
6    CommandInput,
7    CommandList,
8} from '@/components/ui/command'
9
10export function CommandEmptyExample() {
11    return (
12        <Command className="border-border rounded-lg border shadow-md md:min-w-[450px]">
13            <CommandInput placeholder="Search for something..." />
14            <CommandList>
15                <CommandEmpty>No results found.</CommandEmpty>
16            </CommandList>
17        </Command>
18    )
19}
20