Command Palette

A command palette where nothing jumps: as you type, rows that stay glide to their new rank, rows that leave fade and collapse, rows that arrive fade in.

$149 once · every Pro piece

Customize

Open

Initial query

Placeholder

Hotkey (with ⌘ or Ctrl)

Fuzzy matching by subsequence, one sliding highlight, and a brief lift of the command you run. Opens with ⌘K or Ctrl K.

Install

npx shadcn@latest add @obsyde/command-palette

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { CommandPalette } from '@/components/obsyde/ember/command-palette/CommandPalette';

export function Example() {
  return (
    <CommandPalette placeholder="Type a command" hotkey="k" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/command-palette/CommandPalette.tsxcomponent
ember/command-palette/command-palette.cssstyles
ember/command-palette/fuzzy.tsmodule
ember/command-palette/CommandPaletteDemo.tsxdemo
ember/display-kit/highlight.tsshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/display-kit/display-kit.cssshared
ember/display-kit/motion.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`open`Open	`boolean`	`false`
`query`Initial query	`string`	`—`
`placeholder`Placeholder	`string`	`'Type a command'`
`hotkey`Hotkey (with ⌘ or Ctrl)	`string`	`'k'`