primitives

Command

Filterable list — the building block for search palettes, command bars, and combobox menus. Built on `cmdk`.

`CommandDialog` wraps everything in a centered dialog (the global ⌘K palette). For inline list filters use `Command` directly inside a Popover or page section.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/command.json

Or import from the workspace package:

import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@8maverik8/design";

Examples

Inline filter

<Command>
  <CommandInput placeholder="Search resources…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Audiences">
      <CommandItem>Active users <CommandShortcut>↵</CommandShortcut></CommandItem>
      <CommandItem>Churn risk</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Campaigns">
      <CommandItem>Spring 2026 launch</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Guidelines

Always include `CommandEmpty` so an empty filter doesn't render an invisible list.
Use Command for navigation between top-level sections.That's the sidebar. Command is for fuzzy / search-driven jumping.