Feature Request: Add Spotlight / Command Palette Component (similar to Mantine)

[HussainAhmadDev]

Description

A spotlight-style command palette component for quick search and navigation inside apps. This is already supported in other libraries like Mantine.

---

Problem Statement/Justification

Many modern apps use a command palette (like VS Code’s Ctrl+K / ⌘K search) for fast navigation and actions. Chakra UI currently doesn’t have a built-in solution for this. Developers end up pulling in external libraries or building custom implementations, which breaks design consistency.

---

Proposed Solution or API

• Provide a <Spotlight /> or <CommandPalette /> component.
• Should integrate with Chakra’s theming and accessibility out-of-the-box.
• Support keyboard shortcuts, search filtering, and action items.

Example from Mantine:

• Image:
  
• Video demo:
  https://github.com/user-attachments/assets/8708015c-d23d-4ef1-81e0-fd462300cff1

---

Alternatives

• Using Mantine Spotlight in a Chakra UI project (causes design inconsistency).
• Building a custom command palette from scratch (time-consuming, less polished).

---

Additional Information

• Mantine Spotlight docs: https://mantine.dev/core/spotlight/
• Having this in Chakra UI will keep the ecosystem modern and competitive with other UI libraries.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[yashraj4]

Hi, I’d like to take a stab at this feature.

My initial plan is this:

1. Component API: Create a <SpotlightProvider> to manage state and a <Spotlight> component for the UI. The actions could be passed via a prop like actions={[{ title, description, icon, onTrigger }]}.

2. Implementation: Build it on top of Chakra's primitives (Modal, Input, VStack or Box) so that it integrates smoothly with theming and keeps design consistency.

3. Accessibility: Prioritize A11y with full keyboard navigation (Up/Down/Enter/Esc) and the correct ARIA attributes (combobox, listbox, option, aria-activedescendant) to make it screen-reader friendly.

Does this approach sound good to the maintainers?