Configurator

Build your palette.

Set the essentials first, reveal advanced controls only when you need them, and keep the preview and exported code in sync.

1. Basics2. Theme3. Export

Start editing

Better on desktop

This playground is optimized for desktop for full editing and preview controls.

Configurator

Set up the experience

Move from the essentials to structure without facing every control at once.

Live Preview

Sections1

Commands2

RecentsOff

Basics

Essentials

Language, layout, title, search text, shortcut, and recents.

Language

Palette titleTitle color

Search placeholderDescription color

ShortcutShortcut color

Recent itemsRecent items

Theme

Look and feel

Palette colors, overlay, radius, and shadow.

Theme target

Edit each mode separately. Hover and active states are derived automatically from the accent color.

Dark mode palette

Accent color

Surface color

Text color

Title color

Description color

Section title color

Item title color

Item subtitle color

Shortcut color

Border color

Muted color

Overlay color

Radius

Shadow

Sections

Information architecture

Define sections, commands, nested flows, and the order users move through.

Commands2 Commands

Toggle themeSwitch between light and dark mode

Item titleItem iconItem subtitleItem shortcutItem hrefItem keywords

Disabled

Nested commands

toggle-theme

Search workspaceSearch across the workspace

Item titleItem iconItem subtitleItem shortcutItem hrefItem keywords

Disabled

Nested commands

search-workspace

Generated Code

React

Switch frameworks, copy the snippet, and keep the same command structure.

ExportReactLive output from the current configurator state

1import { CommandPalette } from "@cmd-kit/react";2 3const sections = [4  {5    id: "commands",6    title: "Commands",7    items: [8      {9        id: "toggle-theme",10        title: "Toggle theme",11        subtitle: "Switch between light and dark mode",12        shortcut: "mod+t"13      },14      {15        id: "search-workspace",16        title: "Search workspace",17        subtitle: "Search across the workspace",18        shortcut: "mod+p"19      }20    ]21  }22];23const theme = {24  dark: {25    accentColor: "#35d7ff",26    backgroundColor: "#0b1116",27    textColor: "#eff7fb",28    titleColor: "#eff7fb",29    descriptionColor: "#94a3b8",30    mutedColor: "rgba(172, 192, 207, 0.74)",31    sectionTitleColor: "rgba(172, 192, 207, 0.74)",32    itemTitleColor: "#eff7fb",33    itemSubtitleColor: "#94a3b8",34    shortcutColor: "#94a3b8",35    borderColor: "rgba(129, 155, 174, 0.16)",36    overlayColor: "rgba(6, 10, 14, 0.74)",37    radius: "22px",38    shadow: "0 24px 80px rgba(0, 0, 0, 0.42)"39  },40  light: {41    accentColor: "#0fa6d8",42    backgroundColor: "#ffffff",43    textColor: "#0e1720",44    titleColor: "rgba(14, 23, 32, 0.78)",45    descriptionColor: "#5f7388",46    mutedColor: "rgba(49, 68, 84, 0.78)",47    sectionTitleColor: "rgba(49, 68, 84, 0.58)",48    itemTitleColor: "rgba(47, 84, 107, 0.86)",49    itemSubtitleColor: "#5f7388",50    shortcutColor: "#5f7388",51    borderColor: "rgba(83, 112, 136, 0.16)",52    overlayColor: "rgba(232, 241, 248, 0.7)",53    radius: "22px",54    shadow: "0 20px 44px rgba(40, 64, 81, 0.14)"55  }56};57 58export function Demo() {59  return (60    <CommandPalette61      recents={false}62      sections={sections}63      shortcut="mod+k"64      title="Command menu"65      messages={{66        searchPlaceholder: "Search commands...",67        noResults: "No results found.",68        closeLabel: "Close command palette"69      }}70      theme={theme}71    />72  );73}