Docs/Command

Command

Command palette for keyboard navigation and search. Client component.

Usage

tsx

1'use client'
2import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty } from '@storm-ds/ui'
3
4<Command>
5  <CommandInput placeholder="Search commands..." />
6  <CommandList>
7    <CommandGroup heading="Actions">
8      <CommandItem>Copy link</CommandItem>
9      <CommandItem>Paste</CommandItem>
10    </CommandGroup>
11  </CommandList>
12</Command>

Default

Suggestions

Calendar⌘C

Search⌘S

Settings⌘,

Settings

Profile

Billing

Notifications

tsx

1'use client'
2import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty } from '@storm-ds/ui'
3
4function CommandDemo() {
5  return (
6    <Command>
7      <CommandInput placeholder="Search..." />
8      <CommandList>
9        <CommandGroup heading="Suggestions">
10          <CommandItem>Create new</CommandItem>
11          <CommandItem>Edit settings</CommandItem>
12        </CommandGroup>
13        <CommandSeparator />
14        <CommandGroup heading="Admin">
15          <CommandItem>Delete item</CommandItem>
16        </CommandGroup>
17        <CommandEmpty>No results found.</CommandEmpty>
18      </CommandList>
19    </Command>
20  )
21}

With Shortcuts

File

New File⌘N

Open⌘O

Save⌘S

Edit

Undo⌘Z

Redo⌘⇧Z

Find⌘F

tsx

1<Command>
2  <CommandInput placeholder="Press Ctrl+K to search" />
3  <CommandList>
4    <CommandGroup heading="Actions">
5      <CommandItem>
6        <span>Save</span>
7        <CommandShortcut>Ctrl+S</CommandShortcut>
8      </CommandItem>
9    </CommandGroup>
10  </CommandList>
11</Command>

Dialog Mode

File

New File⌘N

Open⌘O

Save⌘S

Edit

Undo⌘Z

Redo⌘⇧Z

Find⌘F

tsx

1<CommandDialog open={open} onOpenChange={setOpen}>
2  <CommandInput placeholder="Search..." />
3  <CommandList>
4    <CommandGroup heading="Search">
5      <CommandItem>Results go here</CommandItem>
6    </CommandGroup>
7  </CommandList>
8</CommandDialog>

Note

Supports keyboard navigation, filtering, groups, shortcuts. CommandDialog wraps Command for modal presentation.

Props

Prop	Type	Default	Description
value	string	-	Current search/filter value (on Command)
onValueChange	(value: string) => void	-	Called when search value changes
heading	string	-	Group label (on CommandGroup)
heading	string	-	Empty state message (on CommandEmpty)
open	boolean	-	Dialog open state (on CommandDialog)
onOpenChange	(open: boolean) => void	-	Dialog state callback (on CommandDialog)

Use with AI

Create a Next.js client component using Storm UI's Command. Import: `import { Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty, CommandShortcut, CommandDialog } from '@storm-ds/ui'`. Use 'use client'. Command is a wrapper for search/filtering. CommandInput captures search text. CommandList contains CommandGroups (with heading prop) and CommandItems. CommandSeparator adds dividers. CommandEmpty shows when no results. CommandShortcut displays keyboard shortcuts aligned right. CommandDialog wraps Command for modal (⌘K) presentation. Example: `<Command><CommandInput placeholder="Search..." /><CommandList><CommandGroup heading="Actions"><CommandItem>Action 1</CommandItem></CommandGroup><CommandEmpty>Not found</CommandEmpty></CommandList></Command>`

Accordion

Carousel