Skip to content

feat: add Command Palette Search Modal Component (#1160) #1245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jun 4, 2026
+395 −0
Merged

feat: add Command Palette Search Modal Component (#1160) #1245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions submissions/examples/command-palette-modal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# Command Palette Search Modal Component

A keyboard-inspired command palette modal similar to VS Code, Linear, and Notion for quick navigation and command execution. Includes a search input with icon, grouped command list with keyboard shortcut badges, a backdrop overlay, and smooth entrance animations.

## Classes

| Class | Description |
|---|---|
| `ease-command-overlay` | Fixed backdrop overlay with blur |
| `ease-command-palette` | Modal container with scale-in animation |
| `ease-command-search` | Search bar with icon and ESC badge |
| `ease-command-input` | Text input for filtering commands |
| `ease-command-esc` | ESC keyboard hint badge |
| `ease-command-list` | Scrollable command list |
| `ease-command-group` | Command section group |
| `ease-command-group-title` | Group section header |
| `ease-command-divider` | Visual divider between groups |
| `ease-command-item` | Individual command with staggered reveal |
| `ease-command-item-icon` | Command icon slot |
| `ease-command-item-label` | Command label text |
| `ease-command-item-spacer` | Flexible spacer between label and shortcut |
| `ease-command-kbd` | Keyboard shortcut badge |

## Usage

```html
<div class="ease-command-overlay"></div>

<div class="ease-command-palette">
<div class="ease-command-search">
<span class="ease-command-search-icon">&#8984;</span>
<input class="ease-command-input" type="text" placeholder="Type a command or search..." />
<kbd class="ease-command-esc">ESC</kbd>
</div>

<div class="ease-command-list">
<div class="ease-command-group">
<span class="ease-command-group-title">Navigation</span>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9874;</span>
<span class="ease-command-item-label">Create Project</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;P</kbd>
</div>
</div>
</div>
</div>
```

## Why it fits EaseMotion CSS

Pure CSS command palette with backdrop blur overlay, scale-in entrance animation, and staggered item reveals. Clean, keyboard-friendly design using design tokens for colors and spacing. Respects `prefers-reduced-motion`.
122 changes: 122 additions & 0 deletions submissions/examples/command-palette-modal/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Command Palette — EaseMotion CSS</title>
<link rel="stylesheet" href="style.css" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
background: #0f0e17;
color: #fff;
font-family: 'Inter', system-ui, sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
h1 { font-size: 2rem; margin-bottom: 0.25rem; text-align: center; }
.subtitle { color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; text-align: center; }
.hint {
font-size: 0.8125rem;
color: rgba(255,255,255,0.25);
text-align: center;
margin-bottom: 3rem;
}
.hint kbd {
display: inline-block;
padding: 0.125rem 0.375rem;
border-radius: 4px;
background: rgba(255,255,255,0.08);
font-family: inherit;
font-size: 0.75rem;
}
</style>
</head>
<body>
<h1>Command Palette</h1>
<p class="subtitle">Keyboard-inspired search modal component — Issue #1160</p>
<p class="hint">Press <kbd>Cmd</kbd> + <kbd>K</kbd> to open (simulated)</p>

<!-- Overlay -->
<div class="ease-command-overlay"></div>

<!-- Palette -->
<div class="ease-command-palette">

<!-- Search -->
<div class="ease-command-search">
<span class="ease-command-search-icon">&#8984;</span>
<input
class="ease-command-input"
type="text"
placeholder="Type a command or search..."
value=""
/>
<kbd class="ease-command-esc">ESC</kbd>
</div>

<!-- Command list -->
<div class="ease-command-list">

<div class="ease-command-group">
<span class="ease-command-group-title">Navigation</span>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9874;</span>
<span class="ease-command-item-label">Create Project</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;P</kbd>
</div>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9881;</span>
<span class="ease-command-item-label">Open Settings</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;S</kbd>
</div>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9776;</span>
<span class="ease-command-item-label">View Dashboard</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;D</kbd>
</div>
</div>

<div class="ease-command-divider"></div>

<div class="ease-command-group">
<span class="ease-command-group-title">Actions</span>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9733;</span>
<span class="ease-command-item-label">Deploy to Production</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;&#8999;D</kbd>
</div>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#8635;</span>
<span class="ease-command-item-label">Run Tests</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;&#8999;T</kbd>
</div>

<div class="ease-command-item">
<span class="ease-command-item-icon">&#9998;</span>
<span class="ease-command-item-label">Quick Note</span>
<span class="ease-command-item-spacer"></span>
<kbd class="ease-command-kbd">&#8984;N</kbd>
</div>
</div>

</div>
</div>

</body>
</html>
220 changes: 220 additions & 0 deletions submissions/examples/command-palette-modal/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
/* ============================================================
EaseMotion CSS — Command Palette Search Modal Component
Issue #1160
============================================================ */

/* ── Overlay ──────────────────────────────────────────────── */

.ease-command-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: ease-kf-command-fade-in 200ms var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both;
z-index: 100;
}

/* ── Palette modal ───────────────────────────────────────── */

.ease-command-palette {
position: fixed;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 540px;
background: #1a1a2e;
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ease-radius-lg, 0.75rem);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
overflow: hidden;
z-index: 101;
animation: ease-kf-command-scale-in 200ms var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both;
}

/* ── Search area ─────────────────────────────────────────── */

.ease-command-search {
display: flex;
align-items: center;
gap: var(--ease-space-3, 0.75rem);
padding: var(--ease-space-4, 1rem) var(--ease-space-4, 1rem);
border-bottom: 1.5px solid rgba(255, 255, 255, 0.06);
}

.ease-command-search-icon {
font-size: 1.125rem;
opacity: 0.35;
flex-shrink: 0;
}

.ease-command-input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-family: inherit;
font-size: var(--ease-text-base, 1rem);
line-height: 1.5;
padding: 0;
}

.ease-command-input::placeholder {
color: rgba(255, 255, 255, 0.3);
}

.ease-command-esc {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: var(--ease-radius-sm, 0.375rem);
background: rgba(255, 255, 255, 0.08);
font-family: inherit;
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.3);
}

/* ── Command list ────────────────────────────────────────── */

.ease-command-list {
padding: var(--ease-space-2, 0.5rem);
max-height: 320px;
overflow-y: auto;
}

/* Custom scrollbar */
.ease-command-list::-webkit-scrollbar {
width: 6px;
}
.ease-command-list::-webkit-scrollbar-track {
background: transparent;
}
.ease-command-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}

/* ── Group ───────────────────────────────────────────────── */

.ease-command-group {
display: flex;
flex-direction: column;
gap: 2px;
}

.ease-command-group-title {
display: block;
padding: var(--ease-space-2, 0.5rem) var(--ease-space-3, 0.75rem);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.3);
}

/* ── Divider ─────────────────────────────────────────────── */

.ease-command-divider {
height: 1.5px;
background: rgba(255, 255, 255, 0.04);
margin: var(--ease-space-1, 0.25rem) 0;
}

/* ── Command item ────────────────────────────────────────── */

.ease-command-item {
display: flex;
align-items: center;
gap: var(--ease-space-3, 0.75rem);
padding: var(--ease-space-2, 0.5rem) var(--ease-space-3, 0.75rem);
border-radius: var(--ease-radius-sm, 0.375rem);
cursor: pointer;
transition:
background var(--ease-speed-fast, 150ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
animation: ease-kf-command-item-in 200ms var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both;
}

.ease-command-item:nth-child(2) { animation-delay: 30ms; }
.ease-command-item:nth-child(3) { animation-delay: 60ms; }
.ease-command-item:nth-child(4) { animation-delay: 90ms; }

.ease-command-item:hover {
background: rgba(255, 255, 255, 0.06);
}

.ease-command-item-icon {
flex-shrink: 0;
width: 20px;
text-align: center;
font-size: 0.875rem;
opacity: 0.5;
}

.ease-command-item-label {
flex-shrink: 0;
font-size: var(--ease-text-sm, 0.875rem);
line-height: 1.5;
}

.ease-command-item-spacer {
flex: 1;
min-width: var(--ease-space-2, 0.5rem);
}

/* ── Keyboard shortcut badge ─────────────────────────────── */

.ease-command-kbd {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 0.125rem 0.375rem;
border-radius: var(--ease-radius-sm, 0.375rem);
background: rgba(255, 255, 255, 0.06);
font-family: inherit;
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.3);
line-height: 1.4;
}

/* ── Keyframes ───────────────────────────────────────────── */

@keyframes ease-kf-command-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes ease-kf-command-scale-in {
from {
opacity: 0;
transform: translateX(-50%) scale(0.96);
}
to {
opacity: 1;
transform: translateX(-50%) scale(1);
}
}

@keyframes ease-kf-command-item-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
.ease-command-overlay,
.ease-command-palette,
.ease-command-item {
animation: none;
}
}
Loading