Command

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

from starhtml import *
from starui import *

Div(
    Command(
        CommandInput(
            placeholder="Type a command or search...",
        ),
        CommandList(
            CommandEmpty("No results found."),
            CommandGroup(
                "Suggestions",
                CommandItem(
                    Icon("lucide:rocket", cls="h-4 w-4 mr-2"),
                    "Launch",
                    CommandShortcut("⌘L"),
                    value="launch",
                    onclick="alert('Launching...')",
                ),
                CommandItem(
                    Icon("lucide:search", cls="h-4 w-4 mr-2"),
                    "Search",
                    CommandShortcut("⌘K"),
                    value="search",
                    onclick="alert('Opening search...')",
                ),
                CommandItem(
                    Icon("lucide:terminal", cls="h-4 w-4 mr-2"),
                    "Terminal",
                    CommandShortcut("⌘T"),
                    value="terminal",
                    onclick="alert('Opening terminal...')",
                ),
            ),
            CommandSeparator(),
            CommandGroup(
                "Recent",
                CommandItem(
                    Icon("lucide:file", cls="h-4 w-4 mr-2"),
                    "Project Alpha",
                    Badge("Active", variant="default", cls="ml-auto"),
                    value="project-alpha",
                    onclick="alert('Opening Project Alpha')",
                ),
                CommandItem(
                    Icon("lucide:file", cls="h-4 w-4 mr-2"),
                    "Project Beta",
                    value="project-beta",
                    onclick="alert('Opening Project Beta')",
                ),
            ),
        ),
        signal="hero_cmd",
        size="md"
    ),
    cls="max-w-2xl mx-auto"
)

Installation

CLI

Install the component using the StarUI CLI:

star add command

Examples

Interactive Task Manager

Command component as a task manager with state transitions. Click tasks to move them: Pending → In Progress → Completed. Add new tasks with Enter (use ! prefix for urgent).

Command Palette with Actions

Interactive command dialog with real actions: navigation, clipboard operations, and system controls

from starhtml import *
from starui import *

Div(
    CommandDialog(
        Button(
            Icon("lucide:terminal", cls="h-4 w-4 mr-2"),
            "Open command palette",
            Kbd("⌘K", cls="ml-auto text-xs"),
            variant="outline",
            cls="w-64 justify-start text-sm text-muted-foreground"
        ),
        [
            CommandInput(placeholder="Type a command or search..."),
            CommandList(
                CommandEmpty("No commands found."),
                CommandGroup(
                    "Navigation",
                    CommandItem(
                        Icon("lucide:home", cls="h-4 w-4 mr-2"),
                        "Go to Home",
                        value="home",
                        onclick="window.location.href='/'",
                        ),
                    CommandItem(
                        Icon("lucide:book-open", cls="h-4 w-4 mr-2"),
                        "Documentation",
                        Icon("lucide:external-link", cls="h-3 w-3 ml-auto opacity-50"),
                        value="docs",
                        onclick="window.open('https://docs.example.com', '_blank')",
                        ),
                    CommandItem(
                        Icon("lucide:github", cls="h-4 w-4 mr-2"),
                        "GitHub Repository",
                        Icon("lucide:external-link", cls="h-3 w-3 ml-auto opacity-50"),
                        value="github",
                        onclick="window.open('https://github.com', '_blank')",
                        ),
                ),
                CommandSeparator(),
                CommandGroup(
                    "Utilities",
                    CommandItem(
                        Icon("lucide:copy", cls="h-4 w-4 mr-2"),
                        "Copy Email",
                        CommandShortcut("⌘C"),
                        value="copy-email",
                        data_on_click=clipboard("[email protected]"),
                        ),
                    CommandItem(
                        Icon("lucide:link", cls="h-4 w-4 mr-2"),
                        "Copy Share Link",
                        CommandShortcut("⌘L"),
                        value="copy-link",
                        data_on_click=clipboard(js("window.location.href")),
                        ),
                    CommandItem(
                        Icon("lucide:download", cls="h-4 w-4 mr-2"),
                        "Export Data",
                        Badge("CSV", variant="secondary", cls="ml-auto"),
                        value="export",
                        onclick="alert('Exporting data as CSV...')",
                        ),
                ),
                CommandSeparator(),
                CommandGroup(
                    "System",
                    CommandItem(
                        Icon("lucide:moon", cls="h-4 w-4 mr-2"),
                        "Toggle Dark Mode",
                        CommandShortcut("⌘D"),
                        value="dark-mode",
                        onclick="document.documentElement.classList.toggle('dark')",
                        ),
                    CommandItem(
                        Icon("lucide:log-out", cls="h-4 w-4 mr-2 text-red-500"),
                        Span("Sign Out", cls="text-red-500"),
                        value="signout",
                        onclick="if(confirm('Sign out?')) window.location.href='/logout'",
                        ),
                ),
                signal="action_cmd",
                cls="max-h-none overflow-visible"
            )
        ],
        signal="action_cmd"
    ),
    cls="flex justify-center"
)

Compact Context Menu

Small command menu for context-specific actions, perfect for dropdowns and right-click menus

from starhtml import *
from starui import *

Div(
    Command(
        CommandList(
            CommandGroup(
                "Item Actions",
                CommandItem(
                    Icon("lucide:edit", cls="h-4 w-4 mr-2"),
                    "Edit",
                    CommandShortcut("⌘E"),
                    value="edit",
                    onclick="alert('Edit mode activated')",
                ),
                CommandItem(
                    Icon("lucide:copy", cls="h-4 w-4 mr-2"),
                    "Duplicate",
                    CommandShortcut("⌘D"),
                    value="duplicate",
                    onclick="alert('Item duplicated')",
                ),
                CommandItem(
                    Icon("lucide:archive", cls="h-4 w-4 mr-2"),
                    "Archive",
                    value="archive",
                    onclick="alert('Item archived')",
                ),
            ),
            CommandSeparator(),
            CommandGroup(
                "Share",
                CommandItem(
                    Icon("lucide:link", cls="h-4 w-4 mr-2"),
                    "Copy Link",
                    value="copy-link",
                    data_on_click=clipboard("https://example.com/item/123"),
                ),
                CommandItem(
                    Icon("lucide:mail", cls="h-4 w-4 mr-2"),
                    "Email",
                    value="email",
                    onclick="window.location.href='mailto:?subject=Check this out'",
                ),
                CommandItem(
                    Icon("lucide:message-circle", cls="h-4 w-4 mr-2"),
                    "Send to Slack",
                    Icon("lucide:external-link", cls="h-3 w-3 ml-auto opacity-50"),
                    value="slack",
                    onclick="alert('Opening Slack...')",
                ),
            ),
            CommandSeparator(),
            CommandItem(
                Icon("lucide:trash", cls="h-4 w-4 mr-2 text-red-500"),
                Span("Delete", cls="text-red-500"),
                CommandShortcut("Del"),
                value="delete",
                onclick="if(confirm('Delete this item?')) alert('Item deleted')",
            ),
        ),
        signal="context_cmd",
        size="sm"
    ),
    cls="max-w-xs"
)

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