Command

LAST ACTION —

Source

"use client"

import { useState } from "react"
import { Command } from "@/registry/warren/command/command"
import type { CommandItem } from "@/registry/warren/command/command"

const COMMANDS: CommandItem[] = [
  { id: "abort", label: "ABORT RUN", kbd: ["Ctrl", "A"], onSelect: () => {} },
  { id: "restart", label: "RESTART ENGINE", kbd: ["Ctrl", "R"], onSelect: () => {} },
  { id: "clear-wall", label: "CLEAR WALL", kbd: ["Ctrl", "W"], onSelect: () => {} },
  { id: "open-graph", label: "OPEN GRAPH", kbd: ["Ctrl", "G"], onSelect: () => {} },
  { id: "open-ledger", label: "OPEN LEDGER", kbd: ["Ctrl", "L"], onSelect: () => {} },
  { id: "freeze", label: "FREEZE DATA", onSelect: () => {} },
  { id: "resume", label: "RESUME LIVE", onSelect: () => {} },
]

export default function CommandDemo() {
  const [value, setValue] = useState("")
  const [last, setLast] = useState("—")
  const items = COMMANDS.map((command) => ({
    ...command,
    onSelect: (id: string) => setLast(id),
  }))
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3 py-12">
      <Command
        items={items}
        placeholder="SEARCH COMMANDS"
        value={value}
        onValueChange={setValue}
      />
      <p className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
        LAST ACTION <span className="text-primary-text">{last}</span>
      </p>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/command.json

Usage

import { Command } from "@/components/ui/command"

<Command
  items={[
    { id: "abort", label: "ABORT RUN", kbd: ["Ctrl", "A"], onSelect: () => open("run") },
    { id: "wall", label: "CLEAR WALL", onSelect: () => clearWall() },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="SEARCH COMMANDS"
/>

Command is a keyboard-first palette: a controlled filter input over a role="listbox" of options. value/onValueChange own the filter string; ArrowUp/ArrowDown move selection (wrapping), Enter calls the active item's onSelect with its id, and the input wires aria-controls + aria-activedescendant to the listbox. Hovering an option moves selection, and clicking an option calls its onSelect directly. Kbd chips render on the right when an item carries key hints.

Filtering

Options are filtered by a case-insensitive substring match against the input value. When the filtered list changes, selection resets to the first option. The input value is displayed caps (CSS-only) while the raw string is preserved, and a screen-reader-only NO MATCHES status announces an empty result.

API Reference

Prop

Type