Components
Command
A command palette for quick access to actions and navigation, often used for keyboard shortcuts.
Loading...
Installation
NPM packages are currently unstable and may cause issues. Use it at your own risk.
npm install @mijn-ui/react-commandUsage
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
Loading...
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. |