@qikbar/qikbar

The open-source command bar for any web app.
Raycast-style search, routing, actions, extensions and AI in one tiny, themeable package.

Website · Docs · Extensions · Theme builder · Playground · llms.txt

_{Watch the 76-second film (sound on)}

npm install @qikbar/qikbar

import { createQikbar } from '@qikbar/qikbar'

createQikbar({
  routes: [
    { path: '/', title: 'Dashboard', icon: 'home' },
    { path: '/settings', title: 'Settings', icon: 'settings' },
  ],
  commands: [{ title: 'New project', icon: 'plus', shortcut: 'c p', run: () => openNewProject() }],
  sources: [{
    id: 'projects',
    title: 'Projects',
    search: ({ query, signal }) => fetch(`/api/projects?q=${query}`, { signal }).then((r) => r.json()),
  }],
})

Press ⌘K.

Features

• Instant fuzzy search: word-boundary and acronym aware, frecency-ranked, highlighted. About 3 ms for 10,000 items. Optional semantic search finds commands by meaning.
• Routing: works with Next.js, React Router, Vue, SvelteKit, Astro, or plain links. autoIndex can turn your nav into commands with no config.
• Views: push lists, grids, Markdown details (streamable), forms and AI chats, with breadcrumbs and back. Multi-select with bulk actions.
• Actions: primary and secondary actions, a Raycast-style action panel (⌘.), shortcuts, inline arguments, confirmations, and toasts with Undo (⌘Z).
• Personal: users pin favorite commands and give them aliases.
• Live sources: search your API as the user types, with debouncing and cancellation.
• AI that acts: Tab to ask. The model can run your commands, search your sources and read the page. Works with Claude, GPT, Gemini, Ollama, any OpenAI-compatible API, Chrome's on-device model, a server proxy, or the user's own key. No SDKs.
• MCP & WebMCP: give the AI the tools of any MCP server, and expose your commands to AI agents in the browser with webmcp: true.
• Extensions: package commands, sources, AI tools and preferences into a portable bundle, inspired by Raycast. Six are built in, and eleven more install with npx @qikbar/qikbar add weather.
• Mobile: a touch layout with long-press actions, a launcher button, and sizing that stays above the on-screen keyboard.
• Translated: every string is a label, with 10 bundled languages.
• Theming: 14 presets, 30+ CSS variables, automatic light and dark, Tailwind-friendly slot classes, or unstyled.
• Tiny and fast: zero dependencies, about 4 KB to boot, the UI loads when the browser is idle, and virtualized lists handle 100k rows.
• Any framework: React, Vue, Svelte, Solid, a <qik-bar> web component (Angular, HTMX, plain HTML), or vanilla JS.
• Analytics-ready: onEvent reports searches, empty searches, runs and more, for PostHog, Plausible or anything else.
• Accessible: ARIA combobox and listbox, focus management, reduced motion.

Set it up with one prompt

Paste this prompt into Claude Code, Cursor, Copilot or Codex. The agent reads your router, pages and API, then wires Qikbar into your app. The full docs for agents are at qikbar.com/llms-full.txt.

Packages

A script-tag build is also available: <script src="https://unpkg.com/@qikbar/qikbar/dist/qikbar.global.js"></script>.

Repository

packages/qikbar   The library (TypeScript, zero dependencies)
apps/web          qikbar.com: marketing site, docs, recipes, playground, theme builder, extensions (Astro)
examples/vanilla  A plain HTML example
examples/react    A React + Vite example

bun install
bun run build      # library + website
bun run test       # library tests (vitest + happy-dom)
bun run dev        # website at http://localhost:4321

Contributing

Issues, extensions, themes and docs fixes are all welcome. See CONTRIBUTING.md.

Brand

The logo lives in assets/: logo.svg (mark), logo-wordmark-dark.svg and logo-wordmark-light.svg, plus PNGs. Run bun run --filter @qikbar/web brand to regenerate favicons and app icons after changing it.

License

MIT. Qikbar started as a hosted SaaS and is now free and open source.