Components

Command

A palette that searches and runs grouped commands with shortcuts; in place or in a dialog opened with ⌘K.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. Type to filter the commands; move with the arrow keys and run one with Enter.

Live example, StorybookOpen in Storybook

Default

Command lists commands in groups. Search looks at labels and the keywords field; shortcut shows keys at the end.

import { Command, Provider, type CommandGroup } from '@bigbang/ui';

const groups: CommandGroup[] = [
  {
    label: 'Pages',
    items: [
      { value: 'home', label: 'Home', icon: 'home', onSelect: () => {} },
      { value: 'settings', label: 'Settings', icon: 'settings', keywords: ['preferences'], onSelect: () => {} },
    ],
  },
  {
    label: 'Actions',
    items: [
      { value: 'new', label: 'Create a new file', icon: 'plus', shortcut: ['⌘', 'N'], onSelect: () => {} },
      { value: 'save', label: 'Save', icon: 'download', shortcut: ['⌘', 'S'], onSelect: () => {} },
      { value: 'theme', label: 'Change theme', icon: 'moon', onSelect: () => {} },
    ],
  },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Command groups={groups} className="max-w-xl" />
    </Provider>
  );
}

In a dialog

CommandDialog opens the palette over the page. By default ⌘K or Ctrl+K opens it; in the example the hotkey is off with hotkey={false}. Choosing a command closes the dialog.

import { Button, CommandDialog, Provider, type CommandGroup } from '@bigbang/ui';
import { useState } from 'react';

const groups: CommandGroup[] = [
  {
    label: 'Pages',
    items: [
      { value: 'home', label: 'Home', icon: 'home', onSelect: () => {} },
      { value: 'settings', label: 'Settings', icon: 'settings', keywords: ['preferences'], onSelect: () => {} },
    ],
  },
  {
    label: 'Actions',
    items: [
      { value: 'new', label: 'Create a new file', icon: 'plus', shortcut: ['⌘', 'N'], onSelect: () => {} },
      { value: 'save', label: 'Save', icon: 'download', shortcut: ['⌘', 'S'], onSelect: () => {} },
      { value: 'theme', label: 'Change theme', icon: 'moon', onSelect: () => {} },
    ],
  },
];

export default function Dialog() {
  const [open, setOpen] = useState(false);
  return (
    <Provider locale="en-GB">
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Open the command palette
      </Button>
      <CommandDialog groups={groups} open={open} onOpenChange={setOpen} hotkey={false} />
    </Provider>
  );
}

Without key hints

hints={false} hides the key hints under the list.

import { Command, Provider, type CommandGroup } from '@bigbang/ui';

const groups: CommandGroup[] = [
  {
    label: 'Pages',
    items: [
      { value: 'home', label: 'Home', icon: 'home', onSelect: () => {} },
      { value: 'settings', label: 'Settings', icon: 'settings', keywords: ['preferences'], onSelect: () => {} },
    ],
  },
  {
    label: 'Actions',
    items: [
      { value: 'new', label: 'Create a new file', icon: 'plus', shortcut: ['⌘', 'N'], onSelect: () => {} },
      { value: 'save', label: 'Save', icon: 'download', shortcut: ['⌘', 'S'], onSelect: () => {} },
      { value: 'theme', label: 'Change theme', icon: 'moon', onSelect: () => {} },
    ],
  },
];

export default function WithoutHints() {
  return (
    <Provider locale="en-GB">
      <Command groups={groups} hints={false} className="max-w-xl" />
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

import { Command, Provider, type CommandGroup } from '@bigbang/ui';

const groups: CommandGroup[] = [
  {
    label: 'Pages',
    items: [
      { value: 'home', label: 'Home', icon: 'home', onSelect: () => {} },
      { value: 'settings', label: 'Settings', icon: 'settings', keywords: ['preferences'], onSelect: () => {} },
    ],
  },
  {
    label: 'Actions',
    items: [
      { value: 'new', label: 'Create a new file', icon: 'plus', shortcut: ['⌘', 'N'], onSelect: () => {} },
      { value: 'save', label: 'Save', icon: 'download', shortcut: ['⌘', 'S'], onSelect: () => {} },
      { value: 'theme', label: 'Change theme', icon: 'moon', onSelect: () => {} },
    ],
  },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Command groups={groups} className="max-w-xl" />
    </Provider>
  );
}