1 GitHub star = 1 new component.

Star the repo
Navigationcommandsearchnavigation

Command Palette UI

Command palette modal with search input and filtered actions.

๐Ÿ” Type a command...
๐Ÿ“„ Create new pageโŒ˜N
๐Ÿš€ Deploy to VercelโŒ˜D
โš™๏ธ Open settingsโŒ˜,

Usage

Copy and paste this code into your React component:

tsx
import { CommandPaletteUI } from 'react-component-kit-ui/navigation';

<CommandPaletteUi>Content</CommandPaletteUi>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/CommandPaletteUI.tsx + CommandPaletteUI.css:

CommandPaletteUI.tsx
'use client';

import './CommandPaletteUI.css';

/** CommandPaletteUI โ€” ported from astro-component-kit. */
export interface CommandPaletteUIProps {
}

export function CommandPaletteUI({}: CommandPaletteUIProps) {
  return (
    <>
      <div className="cmd-palette" data-rk-edffd8="">
        <div className="cmd-search" data-rk-edffd8="">๐Ÿ” Type a command...</div>
        <div className="cmd-list" data-rk-edffd8="">
          <div className="cmd-item" data-rk-edffd8=""><span data-rk-edffd8="">๐Ÿ“„ Create new page</span><kbd data-rk-edffd8="">โŒ˜N</kbd></div>
          <div className="cmd-item" data-rk-edffd8=""><span data-rk-edffd8="">๐Ÿš€ Deploy to Vercel</span><kbd data-rk-edffd8="">โŒ˜D</kbd></div>
          <div className="cmd-item" data-rk-edffd8=""><span data-rk-edffd8="">โš™๏ธ Open settings</span><kbd data-rk-edffd8="">โŒ˜,</kbd></div>
        </div>
      </div>
    </>
  );
}

export default CommandPaletteUI;
CommandPaletteUI.css
/* CommandPaletteUI โ€” ported from astro-component-kit (navigation/CommandPaletteUI.astro) */

.cmd-palette:where([data-rk-edffd8]) { background: #0f172a; border: 1px solid #334155; border-radius: 12px; width: 100%; max-width: 500px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; }
.cmd-search:where([data-rk-edffd8]) { padding: 1rem; border-bottom: 1px solid #334155; color: #64748b; font-size: 0.9rem; }
.cmd-item:where([data-rk-edffd8]) { display: flex; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; transition: 0.2s; color: #fff; font-size: 0.85rem; }
.cmd-item:hover:where([data-rk-edffd8]) { background: #1e293b; }
kbd:where([data-rk-edffd8]) { background: #111; border: 1px solid #333; padding: 2px 5px; border-radius: 4px; font-size: 0.7rem; color: #94a3b8; }

Quick Info

Category
Navigation
Filename
CommandPaletteUI.tsx
Dependencies
None โ€” pure React + CSS
Tags
commandsearchnavigation