Preview loads on approachPreview loads on approach
Exact source · command-palette-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useMemo} from 'react';
import {CommandPalette} from '@astryxdesign/core/CommandPalette';
import {createStaticSource} from '@astryxdesign/core/Typeahead';
// Remove isInline for production — command palettes should be modal.
export default function CommandPaletteShowcase() {
const source = useMemo(
() =>
createStaticSource([
{id: 'home', label: 'Home'},
{id: 'settings', label: 'Settings'},
{id: 'profile', label: 'Profile'},
{id: 'dashboard', label: 'Dashboard'},
{id: 'help', label: 'Help'},
]),
[],
);
return (
<CommandPalette
isOpen
isInline
onOpenChange={() => {}}
searchSource={source}
/>
);
}
Usage
CommandPalette is a searchable dialog for quick access to commands, navigation, and actions. Use it as a keyboard-driven launcher powered by SearchSource for filtering and selection.
Provide a searchSource with bootstrap results so users see useful options before typing.
Use auxiliaryData.group on items to automatically organize results into labeled sections.
Use CommandPalette for simple dropdowns or menus; use Menu or Selector for inline selections.
Add too many groups or items; curate results to keep the palette fast and scannable.
Typed props
Prop
Type and behavior
isOpen
boolean · required
Whether the command palette dialog is visible.
onOpenChange
(isOpen: boolean) => void · required
Called when the palette visibility changes.
searchSource
SearchSource<T> · required
Search source providing items via search(query) and bootstrap(). Use createStaticSource for static lists.
