⌘K
Click search bar to activate • Press ⌘1–4 to switch mode
Mugen Spotlight
A tactile command search surface with a bounded spring-animated mode rail. It keeps apps, files, actions, and global search accessible without overflowing its parent stage.
Interaction Types
Click the mode button or focus the field to reveal the attached mode rail
A filtered liquid silhouette stretches into a real gooey bridge while the rail opens
Type to search with active placeholder and Enter submit
Synthesized audio feedback on focus pop, mode click, and search chime
How to use
'use client';
import { MugenSpotlight } from "@/components/mugen-spotlight/mugen-spotlight";
import { useState } from "react";
export default function Demo() {
const [mode, setMode] = useState("all");
return (
<MugenSpotlight
mode={mode}
onModeChange={setMode}
onSearch={(query, mode) => console.log("Search:", query, mode)}
defaultExpanded={true}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultExpanded | boolean | false | Initial expanded state |
| mode | "all" | "apps" | "files" | "actions" | "all" | Current active search mode |
| onModeChange | (mode: SpotlightMode) => void | — | Callback when active mode changes |
| onSearch | (query: string, mode: SpotlightMode) => void | — | Callback triggered when submitting query with Enter |
| variant | "dark" | "glass" | "dark" | Obsidian dark or frosted milk glass theme |
| placeholder | string | "Search anything..." | Custom input placeholder text |
| shortcut | string | "⌘K" | Shortcut badge displayed in search bar |
| query | string | — | Controlled query |
| defaultQuery | string | "" | Initial query when uncontrolled |
| onQueryChange | (query: string) => void | — | Called on every keystroke |
| defaultMode | SpotlightMode | "all" | Initial mode when uncontrolled |
| expanded | boolean | — | Controlled expanded state |
| onExpandedChange | (expanded: boolean) => void | — | Called when the bar expands or collapses |
| modes | SpotlightModeItem[] | DEFAULT_MODES | Modes shown in the rail |