The command palette for your React app.

GlyphX adds a Spotlight-style command menu to any React app, with fuzzy search, groups, keyboard navigation, light and dark themes, and screen-reader support. It's one component.

Get started

npm install glyphx

Why GlyphX

Everything a command palette needs. Nothing it doesn't.

Give it a list of commands and it handles the rest: search, ranking, grouping, keyboard and mouse, focus and theming.

Keyboard-first

Opens with ⌘ K or ⌘ Shift P by default, then arrows, Enter and Esc. Pick your own shortcuts.

Fuzzy search

“tgl drk” finds “Toggle light and dark”. For equally good matches, titles rank above subtitles and keywords.

Groups and subtitles

Organize commands under headings, with an optional second line of detail.

Light and dark

Follows the system or your app's theme toggle. Every color is a CSS variable.

Accessible

Focus stays inside while it's open and returns when it closes. Screen readers announce the selected command.

Small and scoped

About 10 KB of JavaScript, plus 3 KB of CSS that only styles the palette, never your page.

Ready for Next.js

Marked “use client”, so it works in the App Router. Define commands in a small client component and render it from your root layout.

TypeScript

Typed props and commands, for ESM and CommonJS projects alike.

Try it

This whole website runs on GlyphX

Press ⌘ K or use the search button at the top, then type one of these, or click a card to try it. There are more than 50 commands to explore.

ScratchpadCommands run after the palette closes, so they can move the cursor, open dialogs or navigate.

Quick start

Up and running in a minute

Install

Add the package with npm, pnpm, yarn or bun.

Add the styles

Import glyphx/style.css once. It only styles the palette.

List your commands

Render one GlyphX component with an array of commands.

App.tsx

import { GlyphX, type Command } from "glyphx";
import "glyphx/style.css";

// Outside the component, so it stays
// the same between renders.
const commands: Command[] = [
  {
    id: "home",
    title: "Go to Home",
    group: "Navigation",
    run: () => window.location.assign("/"),
  },
  {
    id: "dark-mode",
    title: "Toggle dark mode",
    subtitle: "Light or dark",
    keywords: ["theme", "night"],
    group: "Settings",
    // Your app's own dark mode. Pass
    // theme={…} so GlyphX follows it.
    run: () => {
      const el = document.documentElement;
      el.classList.toggle("dark");
    },
  },
];

export function App() {
  return <GlyphX commands={commands} />;
}

Read the full guide

See every option in action

Switch themes, shortcuts and command sets, load 1,000 commands, and watch the events and the code update as you go.

Open the playground Read the docs