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

Installation

Package: @bigbang/ui
Import: import { Command } from '@bigbang/ui';
Source: Command.tsx
Storybook: Command · Playground

Command and CommandDialog are in the @bigbang/ui package. The types are exported as CommandGroup and CommandItem.

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

const groups: CommandGroup[] = [
  { label: 'Pages', items: [{ value: 'home', label: 'Home', icon: 'home', onSelect: () => navigate('/') }] },
];

<CommandDialog groups={groups} />;

Props

Command

groupsRequired

Description: Commands in groups. Empty groups are hidden while searching.
Type: readonly CommandGroup[]

label

Description: Accessible name of the search input. Defaults to "Komut paleti" or "Command palette" from the Provider.
Type: string

placeholder

Description: Text in the empty input. Defaults to "Komut ya da sayfa arayın" or "Search commands or pages".
Type: string

emptyText

Description: Text when nothing matches. Defaults to "Sonuç bulunamadı" or "No results".
Type: string

hints

Description: Shows the key hints under the list. Hidden below 640 px.
Type: boolean
Default: true

className

Description: For layout only: size and placement.
Type: string

CommandDialog

groupsRequired

Description: Commands in groups. Empty groups are hidden while searching.
Type: readonly CommandGroup[]

label

Description: Accessible name of the search input. Defaults to "Komut paleti" or "Command palette" from the Provider.
Type: string

placeholder

Description: Text in the empty input. Defaults to "Komut ya da sayfa arayın" or "Search commands or pages".
Type: string

emptyText

Description: Text when nothing matches. Defaults to "Sonuç bulunamadı" or "No results".
Type: string

hints

Description: Shows the key hints under the list. Hidden below 640 px.
Type: boolean
Default: true

className

Description: For layout only: size and placement.
Type: string

open

Description: Whether the palette is open when you control it. Use it with onOpenChange.
Type: boolean

onOpenChange

Description: Called when the palette opens or closes: by the hotkey, Escape, a click outside or a chosen command.
Type: (open: boolean) => void

hotkey

Description: Opens and closes the palette with ⌘K on Apple devices and Ctrl+K elsewhere.
Type: boolean
Default: true

material

Description: 'solid' keeps the palette solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

CommandItem: value, label, onSelect, optional icon, shortcut, keywords and disabled. CommandGroup: label and items.

Data attributes

data-component="command": on the palette; data-component="command-dialog": on the dialog.
data-part="item" and data-part="shortcut": on a command and its shortcut keys.
data-highlighted, data-disabled: Base UI states.