A command palette with Tailwind CSS

A ⌘K command palette in Tailwind CSS v4 with Headless UI's Dialog and Combobox, both free. It opens on ⌘K or Ctrl+K, filters as you type, groups results and routes with the Next.js router.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Tailwind command palette

components/command-palette.tsx

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  Combobox,
  ComboboxInput,
  ComboboxOption,
  ComboboxOptions,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from "@headlessui/react";

export type PaletteItem = { id: string; label: string; group: string; href?: string; shortcut?: string };

const ITEMS: PaletteItem[] = [
  { id: "dashboard", label: "Dashboard", group: "Go to", href: "/dashboard", shortcut: "G D" },
  { id: "invoices", label: "Invoices", group: "Go to", href: "/invoices", shortcut: "G I" },
  { id: "settings", label: "Settings", group: "Go to", href: "/settings" },
  { id: "new-invoice", label: "New invoice", group: "Actions", shortcut: "N" },
  { id: "invite", label: "Invite a teammate", group: "Actions" },
];

// Headless UI gives the modal (Dialog) and the keyboard list (Combobox). Filtering, grouping
// and what a row does are yours. Rows with href navigate; the rest call onCommand.
export function CommandPalette({
  items = ITEMS,
  onCommand,
}: {
  items?: PaletteItem[];
  onCommand?: (id: string) => void;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setQuery("");
        setOpen((o) => !o);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const q = query.trim().toLowerCase();
  const results = q ? items.filter((i) => i.label.toLowerCase().includes(q)) : items;
  const groups = [...new Set(results.map((i) => i.group))];

  function run(item: PaletteItem | null) {
    if (!item) return;
    setOpen(false);
    if (item.href) router.push(item.href);
    else onCommand?.(item.id);
  }

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setQuery("");
          setOpen(true);
        }}
        className="flex items-center gap-3 rounded-lg border border-neutral-200 px-3 py-1.5 text-sm text-neutral-500 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-900"
      >
        Search
        <kbd className="hidden font-sans text-xs sm:inline">⌘K</kbd>
      </button>

      <Dialog open={open} onClose={() => setOpen(false)} className="relative z-50">
        <DialogBackdrop className="fixed inset-0 bg-black/40" />
        <div className="fixed inset-0 overflow-y-auto p-4 pt-[15vh]">
          <DialogPanel className="mx-auto max-w-xl overflow-hidden rounded-xl bg-white text-neutral-950 shadow-2xl ring-1 ring-black/5 dark:bg-neutral-900 dark:text-white dark:ring-white/10">
            <DialogTitle className="sr-only">Command palette</DialogTitle>
            <Combobox onChange={run}>
              <ComboboxInput
                autoFocus
                placeholder="Type a command or search..."
                onChange={(e) => setQuery(e.target.value)}
                // After typing, the Combobox takes the first Escape to close its own list; close the dialog too.
                onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
                className="h-12 w-full border-b border-neutral-200 bg-transparent px-4 text-base outline-none dark:border-neutral-800"
              />
              {results.length > 0 && (
                <ComboboxOptions static className="max-h-80 scroll-py-2 overflow-y-auto p-2">
                  {groups.map((group) => (
                    <div key={group} role="group" aria-label={group} className="pb-1">
                      <div aria-hidden className="px-2 py-1.5 text-xs font-medium text-neutral-500">
                        {group}
                      </div>
                      {results
                        .filter((i) => i.group === group)
                        .map((item) => (
                          <ComboboxOption
                            key={item.id}
                            value={item}
                            className="flex cursor-default items-center justify-between rounded-md px-2 py-2 text-sm select-none data-focus:bg-neutral-100 dark:data-focus:bg-neutral-800"
                          >
                            {item.label}
                            {item.shortcut && <kbd className="font-sans text-xs text-neutral-500">{item.shortcut}</kbd>}
                          </ComboboxOption>
                        ))}
                    </div>
                  ))}
                </ComboboxOptions>
              )}
              {q && results.length === 0 && (
                <p className="px-4 py-6 text-sm text-neutral-500">No results for &ldquo;{query}&rdquo;.</p>
              )}
            </Combobox>
          </DialogPanel>
        </div>
      </Dialog>
    </>
  );
}

components/app-commands.tsx (your actions)

"use client";
import { CommandPalette } from "@/components/command-palette";

// Client wrapper so the root layout (a Server Component) can pass a function.
export function AppCommands() {
  return (
    <CommandPalette
      onCommand={(id) => {
        if (id === "new-invoice") window.dispatchEvent(new CustomEvent("new-invoice"));
        if (id === "invite") console.log("open the invite dialog");
      }}
    />
  );
}

app/layout.tsx (mount it once)

import "./globals.css";
import { AppCommands } from "@/components/app-commands";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header className="flex items-center justify-between border-b border-neutral-200 px-4 py-3 dark:border-neutral-800">
          <span className="font-semibold">Acme</span>
          <AppCommands />
        </header>
        {children}
      </body>
    </html>
  );
}

Good to know

Headless UI is Tailwind Labs' free set of unstyled React components, MIT licensed. Its Combobox docs call comboboxes "the foundation of accessible autocompletes and command palettes". It has no Command component, so the palette is two parts: Dialog for the modal and Combobox for the list. @headlessui/react 2.2.10 (read October 26, 2026) lists react and react-dom ^18 || ^19 as peers.
Filtering is yours. Headless UI's docs say "You are completely in charge of how you filter the results". The snippet keeps rows whose label contains what you typed, so "inv" finds Invoices, New invoice and Invite a teammate. Swap in a fuzzy matcher if you want ranking.
static on ComboboxOptions keeps the list rendered inside the panel instead of opening and closing like a dropdown. Once you type, the first match is highlighted, so Enter runs it. Before you type, nothing is highlighted until you press an arrow key.
Escape needed one extra line. In our test, once something was typed, the first Escape only closed the Combobox's own list and the dialog stayed open. The onKeyDown on ComboboxInput closes the dialog on that Escape too. Escape before typing and a click on the backdrop close it through Dialog's onClose.
The class names are Tailwind v4. Headless UI puts a data-focus attribute on the highlighted row, and data-focus: is v4's variant for it. On Tailwind 3.4 the same variant is written data-[focus]:. We only built this on Tailwind 4.3.3.
Phones have no ⌘K, so the component renders a Search button where you mount it, and the ⌘K hint hides below the sm breakpoint. DialogTitle names the dialog for screen readers; sr-only hides it.
Mount it once, in the root layout's header, so the shortcut works on every page. AppCommands is a small client wrapper because a Server Component layout can't pass a function prop to a client component.

Tailwind Plus, cmdk and shadcn's Command

Tailwind Plus, the paid catalog Tailwind Labs used to call Tailwind UI, has a Command Palettes category of UI blocks. Its catalog pages sit behind its login: every catalog URL we opened on October 26, 2026 went to the sign-in page. So we haven't read those blocks, and this page doesn't describe them.
What Tailwind Labs says in public, in its post of July 25, 2025: command palettes are among the Tailwind Plus blocks that need JavaScript, React and Vue users already had working versions, and the plain HTML versions now run on @tailwindplus/elements, a library it releases for Tailwind Plus customers with a command palette primitive. If you want their finished designs, that's what the purchase gets you. The palette above is the free route on Headless UI, the library Tailwind Labs' own Combobox docs point to for command palettes.
If you'd rather not write filtering and groups yourself, use cmdk. Its README says "You render items, it filters and sorts them automatically." cmdk 1.1.1 (March 14, 2025, MIT) lists react ^18 || ^19 as peers. shadcn's Command "uses the cmdk component by Dip", per its docs read October 26, 2026, so in a shadcn app it's the simpler pick. The Command-K Dashboard guide has a CommandDialog snippet with ⌘K.

shadcn's Command with ⌘K

When the palette should run the whole app: Command-K Dashboard

The palette above opens a list and runs one action. Command-K Dashboard is our paid piece for when the palette drives the app: one React component holds the sidebar, four pages (Overview, Invoices, Team, Revenue) and its own ⌘K menu. A command with a page switches the dashboard's page and calls onNavigate; any other command calls onCommand with its id. When you press Enter, the chosen row stretches into the page and its icon flies into the sidebar.
It doesn't use Headless UI or cmdk. Its palette is its own code: per its README, a combobox input controlling a listbox inside a modal dialog. It keeps commands whose label contains what you typed or whose id starts with it. Its only package is framer-motion. It isn't a shadcn component; you copy its files from the zip.
Tailwind v4: it was written with Tailwind's preflight turned off, and our October 25, 2026 check on Tailwind 4.3.3 found v4 turns preflight back on inside it. It also brings its own dark theme, with variables on :root and styles on html and body. In a Tailwind v4 app like the one above, scope it first; the edit we measured is on its guide.

Scope Command-K Dashboard's CSS in your app

app/workspace/page.tsx (Command-K Dashboard)

"use client";
import { useRouter } from "next/navigation";
import { CommandDashboard, DEFAULT_COMMANDS } from "@/components/CommandDashboard";
import type { Command } from "@/components/engine";

// Page commands switch the dashboard's own pages; the rest reach onCommand with their id.
const commands: Command[] = [
  ...DEFAULT_COMMANDS,
  { id: "docs", label: "Open the docs", group: "Help" },
];

export default function Workspace() {
  const router = useRouter();
  return (
    <CommandDashboard
      commands={commands}
      autoplayDemo={false}
      hotkey="mod+k"
      onNavigate={(page) => router.replace(`/workspace?page=${page}`, { scroll: false })}
      onCommand={(id) => {
        if (id === "plus") router.push("/invoices/new");
        if (id === "invite") router.push("/settings/team");
        if (id === "docs") window.open("/docs", "_blank");
      }}
    />
  );
}

What we checked

Read on October 26, 2026: @headlessui/react 2.2.10 (published April 7, 2026, MIT, peers react and react-dom ^18 || ^19), 1,767,775 npm downloads for October 19 to 25; Headless UI's Combobox and Dialog docs; cmdk 1.1.1 on npm and its README; shadcn's Command docs; Tailwind Labs' post of July 25, 2025 on Tailwind Plus. The Tailwind Plus catalog itself was behind its login.
All three files on this page, plus the Command-K Dashboard page against the product source, type-check with TypeScript 5.9.3 strict and build with next build on Next.js 15.5.28, React 19.1.1 and Tailwind 4.3.3. In headless Chromium at 390 and 1440 px: Ctrl+K opened the palette with focus in the input, "inv" left three rows with Invoices highlighted, "zzz" showed the empty state, Enter, arrow keys plus Enter and a click all routed, Escape closed it before and after typing, a backdrop click closed it, the Search button opened it, and an action row reached onCommand. 0 page errors and no sideways scroll. We pressed Ctrl+K, not ⌘K; the handler checks metaKey for Mac. We didn't test with a screen reader.

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm i @headlessui/react.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

commands: palette entries; a command with a page navigates, the rest call onCommand
onNavigate: the page the palette switched to
onCommand: id of a non-page command
initialPage: page to open on
hotkey: "mod+k" (⌘K on Mac, Ctrl+K elsewhere) or "none"
autoplayDemo: false in a real app
accent: brand colour

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Command Palette in React and Next.js: Cmd+K with cmdk, Done Right

Questions

Does Tailwind CSS have a command palette component?

Tailwind CSS itself is utility classes only. Tailwind Labs' free Headless UI has the Dialog and Combobox the palette above is built from, and its paid Tailwind Plus catalog has command palette blocks.

Is Headless UI free?

Yes. @headlessui/react is MIT licensed, and 2.2.10 supports React 18 and 19.

Why doesn't Escape close my Headless UI palette after I type?

In our test the Combobox took that Escape to close its own list. Close the dialog in ComboboxInput's onKeyDown, as in the snippet.

Does it work on Tailwind 3?

We built it on Tailwind 4.3.3 only. Headless UI sets the same data-focus attribute either way; on Tailwind 3.4 write the variant as data-[focus]:.

Is Command-K Dashboard built on Headless UI?

No. Its palette is its own code and its only package is framer-motion.

Does Command-K Dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.