Command center for your application
After installation import package styles at the root of your application:
The Spotlight component can be used as a search or as a command center for your application. It is used as a search on the mantine.dev website; you can trigger it with the Ctrl + K shortcut. Spotlight is based on the Modal component and supports most of its props.
The @mantine/spotlight package exports an object with actions that can be used to control the spotlight:
These actions can be passed to event listeners or used anywhere in your application (not limited to React components):
You can also import actions directly from the @mantine/spotlight package if you prefer this syntax:
The spotlight object documented above uses the default store; it works fine if you have only one spotlight in your application. In case you need multiple spotlights, you need to create your own store for each of them:
Spotlight uses the use-hotkeys hook to handle keyboard shortcuts. By default, Ctrl + K and Cmd + K shortcuts are used to open spotlight; you can change them with the shortcut prop:
Use the limit prop to limit the maximum number of actions that can be displayed at a time. Usually, 5–7 actions is a good number. The limit prop is crucial for performance in case you have a lot of actions; it will prevent the spotlight from rendering all of them at once.
The example below renders 3000 actions, but only 7 of them are displayed at a time:
By default, Spotlight uses a simple filter that matches actions by label , description , and keywords . You can customize the filtering logic by providing a custom filter function. The filter function receives the search query and actions array, and should return filtered actions.
The custom filter function signature:
You can implement fuzzy search using fuse.js library. This is useful if you want to match actions even with typos or partial matches:
By default, the Spotlight actions list is not scrollable. If you have a lot of actions that you need to display at a time, set the scrollable and maxHeight props. Note that there are caveats with both approaches:
In other words, if you want the actions list to shrink, do not set the scrollable prop and use the limit prop. If you want the actions list to always have a fixed height, set the scrollable and maxHeight props.
Spotlight supports action groups; you can use them to group actions by category:
If you need more control over spotlight rendering and logic, use compound components. Available components:
For example, with the compound components pattern, you can customize action contents:
The Spotlight component uses the react-remove-scroll package to lock scroll. To properly size these elements , add a className to them ( documentation ):
Notifications system