Command Component

Clean command palette with ink-line borders and subtle hover effects.

Command Dialog

Press ⌘K to open the command palette, or click the button below.

Accent Hover Variant

Items with light purple background on hover. Use data-[selected=true]:bg-accent/20 on CommandItem.

With Scroll Area

Explicitly set height with ScrollArea for long lists.

File Browser

Click on a folder to browse its contents.

Action Categories

Settings

API Reference

Based on cmdk library.

Command

Prop	Type	Default	Description
className	string	-	Optional CSS class names for styling

CommandDialog

Prop	Type	Default	Description
open	boolean	false	Controls whether the dialog is open
onOpenChange	(open: boolean) => void	-	Callback when dialog open state changes

CommandInput

Prop	Type	Default	Description
placeholder	string	-	Placeholder text for the input field
className	string	-	Optional CSS class names for styling

CommandList

Prop	Type	Default	Description
className	string	-	Optional CSS class names for styling

CommandEmpty

Prop	Type	Default	Description
children	ReactNode	-	Content displayed when no results found

CommandGroup

Prop	Type	Default	Description
heading	string \| ReactNode	-	Title/heading for the group
className	string	-	Optional CSS class names for styling

CommandItem

Prop	Type	Default	Description
onSelect	(value: string) => void	-	Callback when item is selected
disabled	boolean	false	Whether the item is disabled
className	string	-	Optional CSS class names for styling

CommandSeparator

Prop	Type	Default	Description
className	string	-	Optional CSS class names for styling

CommandShortcut

Prop	Type	Default	Description
children	string	-	Keyboard shortcut text to display

Notes

•All Command subcomponents are built on top of the cmdk library
•Use CommandInput for filtering/search functionality
•Group related items with CommandGroup for better organization
•Use CommandDialog for modal command palettes