Quick Start

<script lang="ts">
  import CommandPalette, { defineActions, createStoreMethods } from '$lib';
  // Use 'svelte-command-palette' in your project

  // Define your actions
  const actions = defineActions([
    {
      title: 'Go to Home',
      subTitle: 'Navigate to homepage',
      icon: '🏠',
      onRun: () => window.location.href = '/',
      shortcut: 'G H'
    },
    {
      title: 'Toggle Dark Mode',
      subTitle: 'Switch theme',
      icon: '🌙',
      onRun: () => document.body.classList.toggle('dark'),
      shortcut: 'T D'
    }
  ]);

  // Optional: Get store methods to control palette programmatically
  const { openPalette } = createStoreMethods();
</script>

<!-- Render CommandPalette at the root of your app -->
<CommandPalette
  commands={actions}
  placeholder="What do you want to do?"
/>

<!-- Optional: Button to open palette -->
<button on:click={openPalette}>
  Open Command Palette
</button>

<!-- src/routes/+layout.svelte -->
<script>
  import CommandPalette, { defineActions } from '$lib';
  import '../app.css';

  const actions = defineActions([
    // Your global actions here
  ]);
</script>

<CommandPalette commands={actions} />
<slot />