Command

Command palette interface for searching, filtering, and executing actions.

from starhtml import *

Div(
    Command(
        CommandInput(placeholder="Search files and commands..."),
        CommandList(
            CommandEmpty("No results found."),
            CommandGroup(
                "Files",
                CommandItem(
                    Icon("lucide:file-text"),
                    "settings.py",
                    CommandShortcut("⌘P"),
                    value="settings.py",
                    keywords="config configuration env",
                ),
                CommandItem(
                    Icon("lucide:file-code"),
                    "deploy.yml",
                    Badge("Modified", variant="secondary", cls="ml-auto"),
                    value="deploy.yml",
                    keywords="ci cd pipeline github actions",
                ),
                CommandItem(
                    Icon("lucide:file-text"),
                    "README.md",
                    value="README.md",
                    keywords="docs documentation",
                ),
            ),
            CommandSeparator(),
            CommandGroup(
                "Commands",
                CommandItem(
                    Icon("lucide:git-branch"),
                    "Switch Branch",
                    CommandShortcut("⌘B"),
                    value="switch-branch",
                    keywords="git checkout",
                ),
                CommandItem(
                    Icon("lucide:terminal"),
                    "Open Terminal",
                    CommandShortcut("⌘`"),
                    value="open-terminal",
                    keywords="shell console cli",
                ),
                CommandItem(
                    Icon("lucide:palette"),
                    "Change Theme",
                    value="change-theme",
                    keywords="color scheme appearance dark light",
                ),
            ),
        ),
        signal="hero_cmd",
    ),
    cls="mx-auto max-w-2xl",
)

Installation

CLI

Install the component using the StarUI CLI:

star add command

Examples

Search with Keywords and Disabled Items

Items have keyword aliases for search discovery — type '2fa' to find Two-Factor Authentication, or 'csv' to find Data Export. The Data Export item is disabled to indicate an unavailable feature. Custom empty state content replaces the default string.

from starhtml import *

Div(
    Command(
        CommandInput(placeholder="Search settings..."),
        CommandList(
            CommandEmpty(
                Div(
                    Icon("lucide:search-x", cls="mx-auto mb-3 size-10 text-muted-foreground/50"),
                    P("No matching settings.", cls="font-medium"),
                    P("Try a different search term.", cls="text-muted-foreground"),
                    cls="text-center text-sm",
                )
            ),
            CommandGroup(
                "General",
                CommandItem(
                    Icon("lucide:globe"),
                    "Language & Region",
                    Span("English (US)", cls="ml-auto text-xs text-muted-foreground"),
                    value="language-region",
                    keywords="locale timezone i18n translation",
                ),
                CommandItem(
                    Icon("lucide:bell"),
                    "Notifications",
                    value="notifications",
                    keywords="alerts push email digest",
                ),
                CommandItem(
                    Icon("lucide:key"),
                    "Two-Factor Authentication",
                    Badge("Recommended", variant="secondary", cls="ml-auto"),
                    value="two-factor",
                    keywords="2fa security mfa totp",
                ),
            ),
            CommandSeparator(),
            CommandGroup(
                "Workspace",
                CommandItem(
                    Icon("lucide:users"),
                    "Team Members",
                    value="team-members",
                    keywords="invite collaborators people roles",
                ),
                CommandItem(
                    Icon("lucide:webhook"),
                    "API Keys",
                    value="api-keys",
                    keywords="tokens secrets credentials",
                ),
                CommandItem(
                    Icon("lucide:database"),
                    "Data Export",
                    value="data-export",
                    keywords="download backup csv json",
                    disabled=True,
                ),
            ),
        ),
        signal="settings_cmd",
    ),
    cls="mx-auto max-w-2xl",
)

Command Dialog

A modal command palette triggered by a button or keyboard shortcut (⌘K). Includes clipboard integration and navigation actions.

from starhtml import *

Div(
    CommandDialog(
        Button(
            Icon("lucide:search"),
            Span("Search...", cls="font-normal text-muted-foreground"),
            Kbd("⌘K", cls="ml-auto text-xs"),
            variant="outline",
            cls="w-64 justify-start text-sm",
        ),
        [
            CommandInput(placeholder="What do you need?"),
            CommandList(
                CommandEmpty("Nothing found."),
                CommandGroup(
                    "Quick Actions",
                    CommandItem(
                        Icon("lucide:plus"),
                        "New Document",
                        CommandShortcut("⌘N"),
                        value="new-doc",
                        keywords="create file page",
                    ),
                    CommandItem(
                        Icon("lucide:upload"),
                        "Import File",
                        value="import",
                        keywords="upload add",
                    ),
                    CommandItem(
                        Icon("lucide:link"),
                        "Copy Page Link",
                        CommandShortcut("⌘L"),
                        value="copy-link",
                        data_on_click=clipboard(window.location.href),
                    ),
                ),
                CommandSeparator(),
                CommandGroup(
                    "Navigate",
                    CommandItem(
                        Icon("lucide:layout-dashboard"),
                        "Dashboard",
                        value="dashboard",
                        onclick="window.location.href='/'",
                    ),
                    CommandItem(
                        Icon("lucide:folder"),
                        "Projects",
                        value="projects",
                        keywords="workspace repos",
                    ),
                    CommandItem(
                        Icon("lucide:bar-chart-3"),
                        "Analytics",
                        value="analytics",
                        keywords="stats metrics usage",
                    ),
                ),
            ),
        ],
        signal="dialog_cmd",
        shortcut="k",
    ),
    cls="flex justify-center",
)

File Context Menu

A compact command menu without a search input, used as a file context menu. The size='sm' variant and no CommandInput keep it tight.

API Reference

Component	Description
`Command`	The root command container with search and filtering
`CommandInput`	Search input for filtering command items
`CommandList`	Container for command items and groups
`CommandEmpty`	Empty state when no results match the search
`CommandGroup`	Group related command items with a heading
`CommandItem`	Individual selectable command item with actions
`CommandSeparator`	Visual separator between command groups
`CommandShortcut`	Display keyboard shortcut for a command
`CommandDialog`	Command palette in a modal dialog overlay