CommandPalette

commandpalette-1779393693176.tsx

'use client'
import { useState, useEffect } from 'react'

const COMMANDS = [
  { id: 1, label: 'New Project', icon: '➕', shortcut: '⌘N' },
  { id: 2, label: 'Open Settings', icon: '⚙️', shortcut: '⌘,' },
  { id: 3, label: 'Toggle Theme', icon: '🌙', shortcut: '⌘T' },
  { id: 4, label: 'Search Files', icon: '🔍', shortcut: '⌘P' },
  { id: 5, label: 'Deploy Now', icon: '🚀', shortcut: '⌘D' },
]

export default function CommandPalette() {
  const [open, setOpen] = useState(true)
  const [query, setQuery] = useState('')
  const [active, setActive] = useState(0)
  const filtered = COMMANDS.filter(c => c.label.toLowerCase().includes(query.toLowerCase()))
  if (!open) return (
    <button onClick={() => setOpen(true)} style={{ padding: '8px 16px', background: '#1e1e2e', color: '#fff', border: 'none', borderRadius: '8px', cursor: 'pointer' }}>
      Open Command Palette ⌘K
    </button>
  )
  return (
    <div style={{ background: 'rgba(0,0,0,0.5)', borderRadius: '12px', padding: '16px', maxWidth: '480px' }}>
      <div style={{ background: '#1e1e2e', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 25px 50px rgba(0,0,0,0.5)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '14px 16px', borderBottom: '1px solid #2d2d3d' }}>
          <span style={{ color: '#888' }}>🔍</span>
          <input
            autoFocus value={query}
            onChange={e => { setQuery(e.target.value); setActive(0) }}
            placeholder="Type a command..."
            style={{ flex: 1, background: 'none', border: 'none', outline: 'none', color: '#fff', fontSize: '15px' }}
          />
          <kbd style={{ background: '#2d2d3d', color: '#888', padding: '2px 6px', borderRadius: '4px', fontSize: '11px' }}>ESC</kbd>
        </div>
        <div style={{ maxHeight: '280px', overflowY: 'auto' }}>
          {filtered.map((cmd, i) => (
            <div key={cmd.id}
              onMouseEnter={() => setActive(i)}
              style={{
                display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 16px',
                background: i === active ? '#2d2d3d' : 'transparent', cursor: 'pointer',
              }}
            >
              <span style={{ fontSize: '18px' }}>{cmd.icon}</span>
              <span style={{ flex: 1, color: '#e2e8f0', fontSize: '14px' }}>{cmd.label}</span>
              <kbd style={{ background: '#1a1a2e', color: '#6366f1', padding: '2px 8px', borderRadius: '4px', fontSize: '11px' }}>{cmd.shortcut}</kbd>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Command palette with fuzzy search and keyboard shortcuts

More from Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays

'use client';

import { useState, useEffect } from 'react';

interface Command {
  id: number;
  title: string;
  description: string;
}

const commands: Command[] = [
  { id: 1, title: 'New File', description: 'Create a new file' },
  { id: 2, title

CommandPalette

Overlays

'use client'
import { useState, useEffect } from 'react'

const notifications = [
  { id: 1, type: '🎉', title: 'New component published', time: '2m ago', read: false },
  { id: 2, type: '💰', title: 'Pro subscription active', time: '1h ago', read: f

DrawerPanel

Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays