Command
Command palette in a native <dialog>. Filter, arrows, enter.
Install
npx raster add command
Markup
<div class="rs-command" style="border:1px solid var(--divider);border-radius:var(--radius)"><input class="rs-command-input" placeholder="Type a command or search…" /><div class="rs-command-list"><div class="rs-command-group">Go to</div><button class="rs-command-item rs-command-item-active"><span>Components</span><span class="rs-command-hint">⌘1</span></button><button class="rs-command-item"><span>Tokens</span><span class="rs-command-hint">⌘2</span></button></div></div>
React
import { CommandDialog } from "@/components/raster/command";
// wire the shortcut once in your app
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(true); }
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
<CommandDialog
open={open}
onClose={() => setOpen(false)}
groups={[{ label: "Go to", items: [{ label: "Components", onSelect: go }] }]}
/>Classes
.rs-command.rs-command-input.rs-command-list.rs-command-group.rs-command-item.rs-command-item-active.rs-command-hint.rs-command-empty