@steviecs/kbar v1.0.0

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

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