All components
Available nowReact

Command workspace

A responsive application shell with navigation, search, and live workspace states.

shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-command-workspace.json

Preview

Live component behavior

Interactive
Preview size
desktop
Workspace

Good morning, Drew

Live
⌘ K
Command menu is ready

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example
import { CommandWorkspace } from "@/components/menace-command-workspace";

export default function Component() {
  return <CommandWorkspace navigation={navigation} commands={commands} />;
}

API and behavior

navigationrequired
Sidebar destinations with optional icons, badges, and disabled state.
commandsrequired
Searchable commands, keywords, grouping, and shortcuts.
activeNavigationIduncontrolled
Controlled navigation selection.
onCommandSelectundefined
Called with the selected command.
  • Command or Control K opens and focuses search.
  • Arrow keys, Enter, and Escape cover the complete command-selection path.
  • Navigation supports controlled selection while the shell remains responsive on narrow screens.