Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Modal command palette
  • Grouped command palette
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Command

Fast, composable command menu and palette with keyboard navigation and filtering.

idle

Usage

import {
	Command,
	CommandDialog,
	CommandDialogPopup,
	CommandDialogTrigger,
	CommandEmpty,
	CommandFooter,
	CommandInput,
	CommandItem,
	CommandList,
	CommandPanel,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<CommandItem />
<CommandDialog>
	<CommandDialogTrigger />
	<CommandDialogPopup>
		<Command>
			<CommandInput />
			<CommandPanel>
				<CommandEmpty />
				<CommandList />
			</CommandPanel>
			<CommandFooter />
		</Command>
	</CommandDialogPopup>
</CommandDialog>

Examples

Modal command palette

Opens an accessible command palette dialog with backdrop, search input, and keyboard navigation.

Grouped command palette

Search grouped actions and pages in a dialog. Selecting a result closes the palette.

Recommendations

GuidancePractice
Do

Use action names that describe outcomes. Group related commands and show shortcuts when they exist.

Usage boundaries

GuidanceBoundary
Scope

Keep important actions available outside the palette. Use Combobox when selecting a form value.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
itemsItemValue[] | CommandGroupItem[]—Array of item options or groups containing item arrays for filtering.
autoHighlightboolean | "always""always"Automatically highlights matching items while typing or on open.
keepHighlightbooleantruePreserves the active item highlight when the pointer leaves the list.
inlinebooleantrueControls whether the command list is rendered inline without popup positioning.
openbooleantrueControls visibility of the command list in inline presentation.
PreviousAlert dialogNextContext Menu