A keyboard-driven page switcher, built in. Press ⌘K / Ctrl+K, or click the header search pill.

It just works

DashboardLayout already mounts the palette and flattens your menuItems into searchable commands — no setup required. Every menu item with a real href becomes a command, tagged with its section.

• ⌘K / Ctrl+K — open / close
• ↑ ↓ — move selection
• ↵ — navigate · Esc — close

Using it standalone

Outside DashboardLayout, compose it yourself with the provider, the useCommandPalette() hook, and the flattenMenuToCommands() helper.

'use client'
import {
  CommandPaletteProvider,
  CommandPalette,
  flattenMenuToCommands,
  useCommandPalette,
} from 'adminlte-react'
import { menuItems } from '@/lib/menu'

function SearchButton() {
  const palette = useCommandPalette()      // undefined outside the provider
  return <button onClick={() => palette?.open()}>Search ⌘K</button>
}

export function Shell({ children }: { children: React.ReactNode }) {
  return (
    <CommandPaletteProvider>
      <SearchButton />
      {children}
      <CommandPalette items={flattenMenuToCommands(menuItems)} />
    </CommandPaletteProvider>
  )
}

Custom commands

CommandPalette accepts any CommandItem[], so you can mix in actions that aren’t in the menu.

import type { CommandItem } from 'adminlte-react'

const commands: CommandItem[] = [
  ...flattenMenuToCommands(menuItems),
  { label: 'New invoice', href: '/pages/invoice', icon: 'bi-receipt', section: 'Actions' },
]

<CommandPalette items={commands} placeholder="Search or jump to…" />

API

• CommandPaletteProvider — holds open state and registers the global ⌘K listener.
• useCommandPalette() — returns { isOpen, open, close, toggle }, or undefined outside the provider.
• flattenMenuToCommands(menu) — turns a MenuNode[] into CommandItem[] (skips # links, de-dupes).
• CommandPalette — props: items: CommandItem[], placeholder?: string.