shadcn.io is an independent project built on shadcn/ui
Every row ends with its keys: Copy, Paste, Cut, Undo, and Redo, including the redo chord. The keys sit at the end of the row. Picking a row selects the command.
Use it in a command menu so people learn the shortcut while they pick. The keys are a Kbd, not a working shortcut. In Vue, Ark UI does not listen for those chords.
Installation
Anatomy
Usage
<Combobox
:collection="collection"
@input-value-change="handleInputValueChange"
@value-change="handleValueChange"
:positioning="{ getAnchorElement: () => triggerRef }"
selectionBehavior="clear"
:value="value"
>
<ComboboxTrigger
:class='cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)'
ref="triggerRef"
>
{{ selected ? selected.label : "Select command..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search commands..." :showTrigger="false" />
<ComboboxEmpty>No command found.</ComboboxEmpty>
<ComboboxList>
<ComboboxItem
v-for="command in collection.items"
class="justify-between gap-2"
:item="command"
:key="command.value"
>
{{ command.label }}<Kbd>{{ command.shortcut }}</Kbd>
</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How is the shortcut placed?
ComboboxItem gets justify-between gap-2, so the command name sits at the start and the Kbd at the end, before the check.
Do the shortcuts work?
No, they're labels. The combobox doesn't listen for those keys. Register the shortcuts in your app if they should run the commands.
Can I search by shortcut?
No, the search matches the command names. The search box says Search commands..., and No command found. shows when nothing matches.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
Kbd
No extra props in this demo. The rest is on the Kbd page.
