Command Dialog

Fast, composable, unstyled command menu in a dialog.

Press K

No results found.
Suggestions
Calendar
Search Emoji
Calculator

Installation

uvx shadcn_django@latest add command_dialog

Usage

<c-command-dialog shortcut_key='k'>
    <c-slot name='trigger_slot'>
        <p class='text-sm text-muted-foreground'>
        Press
        <kbd class='pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100'>
            <span class='text-xs'>⌘</span>K
        </kbd>
        </p>
    </c-slot>

    <c-command.input placeholder='Type a command or search...' />
    <c-command.list>
    <c-command.empty>No results found.</c-command.empty>
    <c-command.group heading='Suggestions'>
        <c-command.item value='calendar'>Calendar</c-command.item>
        <c-command.item value='search-emoji'>Search Emoji</c-command.item>
        <c-command.item value='calculator'>Calculator</c-command.item>
    </c-command.group>
    </c-command.list>
</c-command-dialog>