Command Palette

New

A ⌘K command menu with a gliding highlight

$ npx @hritik-sharmaa/repeat-ui add commons-command-palette
Category
Commons
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
import CommonsCommandPalette from "@/components/repeat-ui/commons-command-palette/preview";

<CommonsCommandPalette
  items={items}
  placeholder="Type a command or search..."
  buttonLabel="Search commands"
  hotkey="k"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-command-palette --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-command-palette/.

    import CommonsCommandPalette from "@/components/repeat-ui/commons-command-palette/preview";

export default function Page() {
  return <CommonsCommandPalette />;
}

Props

PropTypeDefaultDescription
itemsCommandItem[]-{ id, label, group, shortcut?, icon? }.
placeholderstring"Type a command or search..."Search field placeholder.
buttonLabelstring"Search commands"Text on the button that opens the palette.
hotkeystring"k"Letter used with Ctrl/⌘ to open it.
accentColorstring"#fa5f1b"Highlight colour.
backgroundstring"#171717"Panel background.
textColorstring"#fafafa"Text colour.
onSelect(item: CommandItem) => void-Called with the chosen item.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Document Upload ModalDocument upload modal with drag and drop support
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support