Command

A command palette for quick access to actions and navigation, often used for keyboard shortcuts.

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-command

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@mijn-ui/react-command"

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Command Dialog

Press ⌘J

Command Style Slots

Slot Name	Targeted Component	Purpose
`base`	`Command`	Styles the root `Command` component.
`dialogWrapper`	`CommandDialog`	Styles the command dialog Wrapper.
`dialog`	`CommandDialog`	Styles the command dialog.
`group`	`CommandGroup`	Styles the groups inside the command.
`list`	`CommandList`	Styles the command list.
`item`	`CommandItem`	Styles individual command items.
`separator`	`CommandSeparator`	Styles separators inside the command list.
`shortcut`	`CommandShortcut`	Styles shortcut text inside commands.
`empty`	`CommandEmpty`	Styles the state when the command list is empty.
`input`	`CommandInput`	Styles the input field of the command.

Installation

Usage

Examples

Command Dialog

Command Style Slots

On this page