Command

Stable

High-speed fuzzy-filtering command palette powered by cmdk, supporting global ⌘K keyboard shortcuts, nested item categories, and cybernetic neon/glass themes.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Command, 
  CommandDialog, 
  CommandInput, 
  CommandList, 
  CommandEmpty, 
  CommandGroup, 
  CommandItem, 
  CommandShortcut, 
  CommandSeparator 
} from '@siberui/react';

Basic In-Page Command Menu

The command container renders a search input with instantaneous item filtering, grouping, and empty state fallbacks.

tsx

<Command className="rounded-xl border border-white/[0.06] bg-[#050811] shadow-2xl max-w-md w-full h-[320px]">
  <CommandInput placeholder="Search routines or modules..." />
  <CommandList>
    <CommandEmpty>No matching protocol found.</CommandEmpty>
    <CommandGroup heading="TELEMETRY PROTOCOLS">
      <CommandItem>
        <Zap className="mr-2 h-4 w-4 text-cyan-400" />
        <span>Deploy Satellite Transponder</span>
        <CommandShortcut>⌘T</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Shield className="mr-2 h-4 w-4 text-emerald-400" />
        <span>Rotate Air-Gap Cryptographic Keys</span>
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="SUBSYSTEM SETTINGS">
      <CommandItem>
        <Settings className="mr-2 h-4 w-4 text-slate-400" />
        <span>Egress Proxy Settings</span>
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Modal Command Palette (CommandDialog & ⌘K)

Use CommandDialog to render a full-screen floating HUD palette triggered via global hotkeys like ⌘K.

tsx

const [openModal, setOpenModal] = React.useState(false);

<Button variant="neon" glow onClick={() => setOpenModal(true)}>
  PRESS ⌘K OR CLICK TO OPEN PALETTE
</Button>

<CommandDialog open={openModal} onOpenChange={setOpenModal} variant="neon">
  <CommandInput placeholder="Type command..." />
  <CommandList>
    <CommandEmpty>No matches.</CommandEmpty>
    <CommandGroup heading="SYSTEM COMMANDS">
      <CommandItem onSelect={() => setOpenModal(false)}>
        <Terminal className="mr-2 h-4 w-4 text-cyan-400" />
        <span>RESTART_QUANTUM_CORE</span>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Neon Cybernetic Terminal Palette

Pass variant="neon" to apply cyan laser wire frames and monospace command labels.

tsx

<Command variant="neon" className="rounded-xl shadow-2xl max-w-md w-full h-[300px]">
  <CommandInput placeholder="Query active sentinels..." />
  <CommandList>
    <CommandEmpty>Zero sentinels matched query.</CommandEmpty>
    <CommandGroup heading="ACTIVE SATELLITE NODES">
      <CommandItem>
        <Zap className="mr-2 h-4 w-4 text-cyan-400" />
        <span>SAT_SENTINEL_01 [ORBIT]</span>
        <CommandShortcut>99.9%</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Zap className="mr-2 h-4 w-4 text-cyan-400" />
        <span>SAT_SENTINEL_02 [INGEST]</span>
        <CommandShortcut>98.4%</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Frosted Cyber-Glass Quick Dispatch Palette

Composite command search palette nested on circuit textures with perimeter laser sweeps.

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <Command variant="glass" className="h-[280px]">
    <CommandInput placeholder="Filter cryptographic keys..." />
    <CommandList>
      <CommandEmpty>No keys found.</CommandEmpty>
      <CommandGroup heading="KYBER KEYS">
        <CommandItem>
          <Shield className="mr-2 h-4 w-4 text-cyan-400" />
          <span>KEY_LATTICE_0x4B21</span>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Mission Control Palette Card

Composite mission defense card with integrated command dispatch.

COMMAND DISPATCH TERMINAL

ONLINE

Direct command bus to orbital mission sentinels.

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">COMMAND DISPATCH TERMINAL</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Direct command bus to orbital mission sentinels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <Command variant="neon" className="h-[220px]">
      <CommandInput placeholder="Dispatch instruction..." />
      <CommandList>
        <CommandGroup heading="DISPATCH PROTOCOLS">
          <CommandItem>
            <Terminal className="mr-2 h-4 w-4 text-cyan-400" />
            <span>ALIGN_LASER_CARRIER</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	Visual style for Command and CommandDialog.	"default" \| "neon" \| "glass"	"default"
open	For CommandDialog: Controlled modal open state.	boolean	-
onOpenChange	For CommandDialog: State change callback.	(open: boolean) => void	-

Accessibility

ARIA Combobox: Built on cmdk, providing ARIA combobox and listbox attributes with automated active-descendant focus tracking.

Best Practices

Shortcut Badges: Include CommandShortcut on frequent commands so operators learn quick keyboard triggers.