shadcn/ui

A shadcn registry item adds a Cmd+K command palette in your shadcn theme. It renders cmdk-engine's cmdk adapter with your theme's tokens (popover, accent, muted), so it follows light and dark mode, and the file is yours to edit like any shadcn component. It needs cmdk-engine 0.6.0 or later, which the install adds.

Install

bash
npx shadcn@latest add https://priyans-hu.github.io/cmdk-engine/r/command-palette.json

This writes components/command-palette.tsx and installs cmdk-engine and cmdk. To render it with Base UI instead of cmdk, add the Base UI item:

bash
npx shadcn@latest add https://priyans-hu.github.io/cmdk-engine/r/command-palette-base-ui.json

It writes components/command-palette-base-ui.tsx with the same CommandPalette export and installs @base-ui/react. Give your app's root element isolation: isolate so the dialog stays on top.

Use it

Render the palette once inside CommandEngineProvider, and register commands anywhere under it:

App.tsx
import { CommandEngineProvider, useCommandRegister } from 'cmdk-engine/react'
import { CommandPalette } from '@/components/command-palette'

// Define config once, outside the component.
const config = { onNavigate: (href: string) => window.location.assign(href) }

function Commands() {
  useCommandRegister([
    { id: 'home', label: 'Home', href: '/' },
    { id: 'billing', label: 'Billing', href: '/billing', keywords: ['invoices'] },
  ])
  return null
}

export default function App() {
  return (
    <CommandEngineProvider config={config}>
      <Commands />
      <CommandPalette />
      {/* your app */}
    </CommandEngineProvider>
  )
}

Cmd+K (Ctrl+K on Windows and Linux) opens it. To open it from a button, call usePaletteState().setIsOpen(true) from cmdk-engine/react. In a Next.js App Router project, put the provider and the palette in a 'use client' file and pass router.push as onNavigate.

Example

The shadcn example is a Vite app set up with shadcn init that uses both items. Open it in StackBlitz.

PreviousNext.jsNextSearch