Command
Build a searchable command list with keyboard navigation.
Preview
Import
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandDialog } from "@sigil-ui/components";Usage
<Command className="border border-[var(--s-border)]">
<CommandInput placeholder="Type a command..." />
<CommandList>
<CommandEmpty>No results.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search</CommandItem>
<CommandItem>Settings</CommandItem>
</CommandGroup>
</CommandList>
</Command>Sub-components
This component includes the following parts:
<CommandInput><CommandList><CommandEmpty><CommandGroup><CommandItem><CommandSeparator><CommandDialog>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-background | Background |
--s-text | Text |
--s-border-style | Border style |
--s-border | Border |
--s-text-muted | Text muted |
--s-radius-sm | Radius sm |
--s-surface | Surface |