KBar

A command+k navigation bar for React with cross-domain support. This component allows you to access previously visited pages across your domains and pin important resources.

Features

• Press Command+K (or Ctrl+K on Windows/Linux) to open the navigation bar
• Remembers pages you've visited across subdomains
• Pin important resources for quick access
• Search through your history and pinned items
• Cross-domain support with cookies
• Fully customizable appearance
• Lightweight and responsive

Installation

npm install kbar

# You'll also need to install the peer dependencies if you don't have them already
npm install framer-motion

Usage

import { KBar } from "kbar";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <KBar
        initialPinnedResources={[
          { title: "Documentation", url: "https://docs.example.com" },
          { title: "Support", url: "https://support.example.com" },
        ]}
        cookieDomain=".example.com" // Allow sharing between subdomains
      />
    </div>
  );
}

Cross-Domain Support

To enable cross-domain support between subdomains (e.g., app.example.com and docs.example.com), provide the common parent domain in the cookieDomain prop:

<KBar cookieDomain=".example.com" />

The leading dot is important for cross-subdomain support.

Props

| Prop | Type | Default | Description | | ------------------------ | ------ | ------------------------ | ---------------------------------------- | | className | string | undefined | Custom class name for the KBar container | | maxHistoryItems | number | 10 | Maximum number of history items to show | | historyStorageName | string | 'kbar-history' | Cookie name for storing history | | pinnedStorageName | string | 'kbar-pinned' | Cookie name for storing pinned items | | cookieDomain | string | undefined | Cookie domain for cross-domain support | | cookieExpiration | number | 30 | Cookie expiration in days | | hotkey | string | 'k' | The hotkey to use with Command/Ctrl | | searchPlaceholder | string | 'Search or jump to...' | Custom placeholder for the search input | | initialPinnedResources | array | [] | Initial pinned resources |

Peer Dependencies

KBar has the following peer dependencies:

• react: >=16.8.0
• react-dom: >=16.8.0
• framer-motion: >=5.0.0

Make sure to install these in your project if you don't have them already.

License

MIT