Components/Command Palette

Command Palette

Tier 2: Light-DOM

Fast instant-filtered command menu with keyboard navigation

Installation

$npx nnui add command

copy

Interactive Preview & Code

Or press ⌘K (Mac) / Ctrl+K (Windows) anywhere on this page.

🔍

Suggestions

📅 Calendar ⌘C

😊 Search Emoji ⌘E

🧮 Launch Calculator

Settings

👤 User Profile ⌘P

💳 Billing Preferences ⌘B

<!-- Command Palette with Modal Dialog and ⌘K Shortcut -->
<button data-ui="button" onclick="document.getElementById('cmd').showModal()">
  Open Command <kbd data-ui="kbd">⌘K</kbd>
</button>

<ui-command id="cmd" shortcut="k">
  <dialog data-part="dialog">
    <div data-part="command-wrapper">
      <div data-part="input-wrapper">
        <span data-part="search-icon">🔍</span>
        <input data-part="input" placeholder="Type a command or search..." autocomplete="off">
        <kbd data-ui="kbd">ESC</kbd>
      </div>

      <div data-part="list">
        <div data-part="empty" hidden>No results found.</div>

        <div data-part="group">
          <div data-part="group-heading">Suggestions</div>
          <div data-part="item" data-value="calendar">
            <span>📅 Calendar</span>
            <kbd data-ui="kbd">⌘C</kbd>
          </div>
          <div data-part="item" data-value="emoji">
            <span>😊 Search Emoji</span>
          </div>
        </div>

        <div data-part="group">
          <div data-part="group-heading">Settings</div>
          <div data-part="item" data-value="profile">
            <span>👤 Profile</span>
            <kbd data-ui="kbd">⌘P</kbd>
          </div>
        </div>
      </div>
    </div>
  </dialog>
</ui-command>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function CommandpaletteDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <!-- Command Palette with Modal Dialog and ⌘K Shortcut -->
    <button data-ui="button" onclick="document.getElementById('cmd').showModal()">
      Open Command <kbd data-ui="kbd">⌘K</kbd>
    </button>

    <ui-command id="cmd" shortcut="k">
      <dialog data-part="dialog">
        <div data-part="command-wrapper">
          <div data-part="input-wrapper">
            <span data-part="search-icon">🔍</span>
            <input data-part="input" placeholder="Type a command or search..." autocomplete="off" />
            <kbd data-ui="kbd">ESC</kbd>
          </div>

          <div data-part="list">
            <div data-part="empty" hidden>No results found.</div>

            <div data-part="group">
              <div data-part="group-heading">Suggestions</div>
              <div data-part="item" data-value="calendar">
                <span>📅 Calendar</span>
                <kbd data-ui="kbd">⌘C</kbd>
              </div>
              <div data-part="item" data-value="emoji">
                <span>😊 Search Emoji</span>
              </div>
            </div>

            <div data-part="group">
              <div data-part="group-heading">Settings</div>
              <div data-part="item" data-value="profile">
                <span>👤 Profile</span>
                <kbd data-ui="kbd">⌘P</kbd>
              </div>
            </div>
          </div>
        </div>
      </dialog>
    </ui-command>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <!-- Command Palette with Modal Dialog and ⌘K Shortcut -->
  <button data-ui="button" onclick="document.getElementById('cmd').showModal()">
    Open Command <kbd data-ui="kbd">⌘K</kbd>
  </button>

  <ui-command id="cmd" shortcut="k">
    <dialog data-part="dialog">
      <div data-part="command-wrapper">
        <div data-part="input-wrapper">
          <span data-part="search-icon">🔍</span>
          <input data-part="input" placeholder="Type a command or search..." autocomplete="off">
          <kbd data-ui="kbd">ESC</kbd>
        </div>

        <div data-part="list">
          <div data-part="empty" hidden>No results found.</div>

          <div data-part="group">
            <div data-part="group-heading">Suggestions</div>
            <div data-part="item" data-value="calendar">
              <span>📅 Calendar</span>
              <kbd data-ui="kbd">⌘C</kbd>
            </div>
            <div data-part="item" data-value="emoji">
              <span>😊 Search Emoji</span>
            </div>
          </div>

          <div data-part="group">
            <div data-part="group-heading">Settings</div>
            <div data-part="item" data-value="profile">
              <span>👤 Profile</span>
              <kbd data-ui="kbd">⌘P</kbd>
            </div>
          </div>
        </div>
      </div>
    </dialog>
  </ui-command>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<!-- Command Palette with Modal Dialog and ⌘K Shortcut -->
<button data-ui="button" onclick="document.getElementById('cmd').showModal()">
  Open Command <kbd data-ui="kbd">⌘K</kbd>
</button>

<ui-command id="cmd" shortcut="k">
  <dialog data-part="dialog">
    <div data-part="command-wrapper">
      <div data-part="input-wrapper">
        <span data-part="search-icon">🔍</span>
        <input data-part="input" placeholder="Type a command or search..." autocomplete="off">
        <kbd data-ui="kbd">ESC</kbd>
      </div>

      <div data-part="list">
        <div data-part="empty" hidden>No results found.</div>

        <div data-part="group">
          <div data-part="group-heading">Suggestions</div>
          <div data-part="item" data-value="calendar">
            <span>📅 Calendar</span>
            <kbd data-ui="kbd">⌘C</kbd>
          </div>
          <div data-part="item" data-value="emoji">
            <span>😊 Search Emoji</span>
          </div>
        </div>

        <div data-part="group">
          <div data-part="group-heading">Settings</div>
          <div data-part="item" data-value="profile">
            <span>👤 Profile</span>
            <kbd data-ui="kbd">⌘P</kbd>
          </div>
        </div>
      </div>
    </div>
  </dialog>
</ui-command>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { CommandPalette } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-command> and <nnui-command> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.