Command | FrameUI

Usage

TS

import { FrCommandModule, FrCommandService } from '@frame-ui-ng/components/command';

HTML

<section frCommand class="command-demo">
  <input frCommandInput placeholder="Type a command or search..." />
  <div frCommandList>
    <p frCommandEmpty>No results found.</p>
    <div frCommandGroup heading="Suggestions">
      <p frCommandGroupHeading>Suggestions</p>
      <button frCommandItem value="calendar" label="Calendar">Calendar</button>
      <button frCommandItem value="emoji" label="Search Emoji">Search Emoji</button>
      <button frCommandItem value="calculator" label="Calculator" keywords="math,numbers">
        Calculator
      </button>
    </div>
    <div frCommandSeparator></div>
    <div frCommandGroup heading="Settings">
      <p frCommandGroupHeading>Settings</p>
      <button frCommandItem value="profile" label="Profile">
        <span>Profile</span>
        <span frCommandShortcut>⌘P</span>
      </button>
      <button frCommandItem value="billing" label="Billing">
        <span>Billing</span>
        <span frCommandShortcut>⌘B</span>
      </button>
    </div>
  </div>
</section>

Examples

Basic

A searchable command menu with groups, empty state, separators, and shortcuts.

Dialog

Open a command menu from the template with FrCommandDialog and FrCommandDialogTrigger.

Programmatic

Inject FrCommandService and open a command menu component directly from code.

Shortcuts

Use FrCommandShortcut for display-only keyboard shortcut hints.

Groups

Group related commands, add icons, and separate sections with FrCommandSeparator.

Scrollable

Limit the command list height to keep long menus usable.

RTL support

Command uses logical spacing, so items, shortcuts, groups, and icons adapt in RTL.

Custom Styling

Override command tokens locally to tune the surface, list height, item highlight treatment, or dialog presentation.

Token Inspector

Inspect the command shell, input, list, group, item, separator, and shortcut tokens.

Design Tokens

Use these CSS custom properties to tune command surfaces, search input, groups, items, shortcuts, separators, and dialog overlays.

SCSS


  --frame-command-bg: var(--frame-surface);
  --frame-command-color: var(--frame-surface-foreground);
  --frame-command-border: var(--frame-border);
  --frame-command-radius: var(--frame-radius-lg);
  --frame-command-shadow: 0 16px 48px rgb(0 0 0 / 0.14);
  --frame-command-input-height: 3.25rem;
  --frame-command-list-max-height: 20rem;
  --frame-command-item-height: 2.5rem;
  --frame-command-item-highlighted-bg: var(--frame-accent);
  --frame-command-item-highlighted-color: var(--frame-accent-foreground);
  --frame-command-shortcut-color: var(--frame-muted-foreground);
  --frame-command-backdrop-bg: rgb(0 0 0 / 0.42);

Icons