Installation
npm install @kuzenbo/core
Usage
import { Command } from "@kuzenbo/core";
function Example() {
return (
<Command className="rounded-lg border shadow-md">
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>Calendar</Command.Item>
<Command.Item>Search Emoji</Command.Item>
<Command.Item>Calculator</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
Profile
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
Billing
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command>
);
}
Props
Command
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size of the command menu and its children.
The controlled value of the selected item.
Callback when the selected value changes.
filter
(value: string, search: string) => number
Custom filter function.
Whether to filter items based on search.
Additional CSS classes to apply.
Placeholder text for the input.
Additional CSS classes to apply.
Command.List
Additional CSS classes to apply.
Command.Group
The heading for this group.
Additional CSS classes to apply.
Command.Item
Callback when this item is selected.
Whether the item is disabled.
Additional CSS classes to apply.
Command.Shortcut
Additional CSS classes to apply.
Advanced Patterns
Command Dialog
const [open, setOpen] = useState(false);
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
return (
<Command.Dialog open={open} onOpenChange={setOpen}>
<Command.Input placeholder="Type a command or search..." />
{/* ... */}
</Command.Dialog>
);
Custom Filtering
<Command
filter={(value, search) => {
if (value.toLowerCase().includes(search.toLowerCase())) return 1;
return 0;
}}
>
{/* ... */}
</Command>