Command

Finds and runs commands in a native dialog. Filter by typing; navigate with arrows and Enter.

Preview

In action

Jump

⌘K

Jump the catalog without leaving the sheet.

When to use

Use it for

A palette of commands and destinations behind one shortcut.
keywords on an item to widen the match; hint for the shortcut label.

Not for

Picking a value for a field; use Combobox.
Fewer than ten commands; use DropdownMenu.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { CommandDialog } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/command.

2. Vendor the source

npx @noorddev/vlak-cli add command

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/command.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useEffect, useState } from "react";
import { CommandDialog } from "@noorddev/vlak-react";

const [open, setOpen] = useState(false);

// wire the shortcut once in your app
useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen(true);
    }
  };
  window.addEventListener("keydown", onKey);
  return () => window.removeEventListener("keydown", onKey);
}, []);

<CommandDialog
  open={open}
  onClose={() => setOpen(false)}
  groups={[
    { label: "Go to", items: [{ label: "Components", hint: "⌘1", onSelect: () => go("/components") }] },
    { label: "Actions", items: [{ label: "New project", keywords: "create add", onSelect: create }] },
  ]}
/>

Props

Command

Filter, arrows, enter. The input keeps focus; the list is aria-activedescendant.

Prop	Type	Default
`groups`required	`CommandGroup[]`
`placeholder`	`string`	`"Type a command or search…"`
`emptyLabel`	`ReactNode`	`"Nothing found."`
`onDone`	`() => void`

Also accepts HTMLAttributes<HTMLDivElement>.

CommandDialog

The palette in a native <dialog>. Wire ⌘K in your app to setOpen(true).

Prop	Type	Default	Description
`groups`required	`CommandGroup[]`
`placeholder`	`string`
`emptyLabel`	`ReactNode`
`onDone`	`() => void`
`open`required	`boolean`
`onClose`	`() => void`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Type`	Filters the items by label and keywords
`Arrow down, Arrow up`	Moves the active item
`Home, End`	First or last item
`Page up, Page down`	Moves ten items
`Enter`	Runs the active item and closes
`Escape`	Closes

Accessibility

The input is role="combobox" named "Command" with aria-autocomplete="list" and aria-activedescendant; the list is role="listbox" with labelled role="group" sections.
CommandDialog places it in a native modal <dialog>; Command alone renders inline. The input takes focus on mount.

Markup

<div class="rs-command" style="border:1px solid var(--divider);border-radius:var(--radius)"><input class="rs-command-input" placeholder="Type a command or search…" /><div class="rs-command-list" role="listbox"><div class="rs-command-group">Go to</div><div class="rs-command-item rs-command-item-active" role="option" aria-selected="true"><span>Components</span><span class="rs-command-hint">⌘1</span></div><div class="rs-command-item" role="option" aria-selected="false"><span>Tokens</span><span class="rs-command-hint">⌘2</span></div></div></div>

Classes

.rs-command.rs-command-input.rs-command-list.rs-command-group.rs-command-item.rs-command-item-active.rs-command-hint.rs-command-empty

Depends on

/dialog