The command bar
your app deserves.

Qikbar adds Raycast-style search, navigation, actions and AI to any web app. It takes one function call, has zero dependencies, and works with any framework.

Get started

acme.app

Try

Works withReactNext.jsVueSvelteAstroAngularSolidRemixHTMXPlain HTML

Search, live data, actions, views, AI, extensions and themes, in 76 seconds.

How it works

From zero to ⌘K in three steps.

Install

One package, zero dependencies. Or a single script tag.

npm install @qikbar/qikbar

Describe your app

Routes, commands and data sources are plain objects. Or let autoIndex read your nav.

createQikbar({ routes, commands })

Press ⌘K

Users search, navigate, act and ask AI from anywhere in your app.

// that’s it

Everything ⌘K should be

One package. Every feature you’d build yourself.

Most command palettes give you a list and a text box. Qikbar gives you the whole product: ranking, routing, views, data, AI, extensions and theming.

Instant fuzzy search

A tuned matcher ranks word starts, acronyms and camelCase. Frequently used items rise to the top. Matches are highlighted as you type.

Routing built in

Pass your routes and your router’s navigate function. Works with Next.js, React Router, Vue, SvelteKit, Astro, or plain links.

Views, not just lists

Push lists, grids, Markdown details, forms and chats. Raycast-style navigation with breadcrumbs, back and an action panel.

Live data sources

Search your API as the user types, with debouncing and cancellation built in. Results merge into ranked sections.

AI that takes action

“Take me to billing for Acme.” The model sees your commands as tools and runs them. Works with Claude, GPT, Gemini, local models, or your own key.

Extensions API

Package commands, sources, AI tools and preferences into an extension. Inspired by Raycast and framework-agnostic.

Themeable to the pixel

14 presets, 30+ CSS variables, light and dark, slot class names for Tailwind, or unstyled. It looks like part of your app.

Keyboard first

Global shortcuts and sequences ("g s"), action shortcuts, inline arguments, Tab to AI and Esc to go back. Accessible combobox markup.

Zero dependencies

About 3.5 KB to boot. The UI loads when the browser is idle. Virtualized lists handle 100,000 rows. No framework lock-in.

AI-native

Type what you want. It does it.

Press Tab from any search to ask AI. Every command, route and data source becomes a tool the model can call. Users can say “open the Billing v2 project” instead of looking for it.

Claude, GPT, Gemini, Ollama and any OpenAI-compatible API, with no SDK
A server proxy keeps keys private. Or let users bring their own key.
Chrome’s built-in on-device model, free and private
Confirmation before destructive actions
ctx.ai.stream() for your own AI commands

Read the AI guide

Developer experience

A few lines to a great search experience.

Everything is plain data: commands, views and actions are objects. Use it from React, Vue, Svelte, a script tag, or let an AI agent wire it up for you.

import { createQikbar } from '@qikbar/qikbar'

createQikbar({
  routes: [
    { path: '/dashboard', 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()),
  }],
})

'use client'
import { Qikbar, useCommands } from '@qikbar/qikbar/react'
import { useRouter } from 'next/navigation'

export function CommandBar() {
  const router = useRouter()
  return <Qikbar routes={routes} navigate={(href) => router.push(href)} theme="linear" />
}

// Anywhere in your tree: page-specific commands
function ProjectPage({ project }) {
  useCommands([{ title: `Archive ${project.name}`, icon: 'trash', run: () => archive(project.id) }], [project.id])
}

<script src="https://unpkg.com/@qikbar/qikbar/dist/qikbar.global.js"></script>
<script>
  // Indexes your nav links and [data-qikbar] elements automatically.
  Qikbar.createQikbar({ autoIndex: true })
</script>

<button data-qikbar="Sign out" onclick="signOut()">Sign out</button>
<button data-qikbar-open>Search… ⌘K</button>

import { createQikbar, proxy } from '@qikbar/qikbar'

// Browser: talk to your own endpoint (keys stay on the server)
createQikbar({ routes, commands, ai: proxy('/api/qikbar') })

// Server (Next.js route handler, Hono, Bun, Workers…)
import { createHandler, anthropic } from '@qikbar/qikbar/server'
export const POST = createHandler({
  provider: anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }),
})

Use cases

Built for the apps people use all day.

Anywhere users have more than a handful of pages, records or actions, a command bar makes them faster.

SaaS dashboards

Jump to any customer, project or setting. Run actions without hunting through menus.

Documentation sites

Search every page and heading instantly. Let readers ask AI about the page they’re on.

Internal tools

Give ops and support teams a keyboard-first way to find records and run workflows.

Developer tools

Expose your CLI’s power in the browser: projects, deploys, logs and environment switching.

Set up with one prompt

Let your coding agent do it.

Paste this into Claude Code, Cursor, Copilot or Codex. It reads your router, routes and API, then wires up Qikbar to match your app. Every docs page is also available as Markdown at /llms.txt.

Add a Qikbar command bar (⌘K) to this app.

Qikbar is an open-source, zero-dependency command bar library (npm package `@qikbar/qikbar`). The full documentation for AI agents is at https://qikbar.com/llms-full.txt. Read it before you start.

Do the following:

1. Install it with this project's package manager (`npm install @qikbar/qikbar`, `pnpm add @qikbar/qikbar`, `yarn add @qikbar/qikbar` or `bun add @qikbar/qikbar`).

2. Find how this app does routing (Next.js, React Router, TanStack Router, Vue Router, SvelteKit, Remix, Astro, or plain links). Mount Qikbar once, near the root:
   - React and Next.js: render `<Qikbar … />` from `@qikbar/qikbar/react` in the root layout or a top-level client component.
   - Anything else: call `createQikbar({ … })` from `@qikbar/qikbar` once on the client.
   - Pass the router's navigate function as `navigate`, for example `navigate: (href) => router.push(href)`.

3. Add a `routes` entry for every main page you find (path, title, an `icon` from the built-in icon names, and `keywords`). Group them with `section`.

4. Add `commands` for the main actions a user takes (create, invite, toggle, sign out, open settings…). Wire them to the app's existing functions. Use `view: form({...})` for actions that need input. Use `arguments` for one or two quick text inputs.

5. For each main kind of record (projects, users, documents, orders…), add a `sources` entry. It calls the app's existing API or data layer with the query and returns items (`title`, `subtitle`, `href`, `icon`). Respect the `signal` for cancellation.

6. Make it match the app's design. Set `theme: { vars: { … } }` from the app's colors, font, and radius (accent, bg, fg, border, radius, font). Set `appearance: 'auto'` if the app has a dark mode.

7. Add a visible trigger, for example a "Search… ⌘K" button in the header, with the `data-qikbar-open` attribute or `useQikbar().open()`.

8. If the app already uses an AI provider, or the user wants AI: add a server route with `createHandler` from `@qikbar/qikbar/server`, and set `ai: proxy('/api/qikbar')` on the client. Keep API keys on the server. Otherwise skip AI.

9. Add the built-in extensions that fit: `calculator()`, `themeSwitcher()` (only if the app has dark mode), and `shortcuts()` from `@qikbar/qikbar/extensions`.

10. Run the type checker and the build. Fix any errors. Then summarize what you added, with file paths.

Keep the changes small and idiomatic for this codebase. Don't add new dependencies besides `@qikbar/qikbar`.

Extensions

Build once, share everywhere.

An extension bundles commands, live sources, AI tools and user preferences. If preferences are missing, Qikbar asks for them the first time and stores them. It works in any app that uses Qikbar.

Browse all 11 extensions

import { defineExtension, list } from '@qikbar/qikbar'

export const github = defineExtension({
  name: 'github',
  title: 'GitHub',
  icon: 'github',
  preferences: [{ name: 'token', title: 'Access token', type: 'password', required: true }],
  commands: [{
    name: 'repos',
    title: 'Search Repositories',
    view: (ctx) => list({
      placeholder: 'Search repositories…',
      items: async ({ query, signal }) => {
        const res = await fetch(`https://api.github.com/search/repositories?q=${query}`, {
          headers: { authorization: `Bearer ${ctx.preferences.token}` }, signal,
        })
        const { items } = await res.json()
        return items.map((r) => ({ title: r.full_name, subtitle: r.description, url: r.html_url,
          accessories: [{ text: `★ ${r.stargazers_count}` }] }))
      },
    }),
  }],
  tools: [{
    name: 'create_issue',
    description: 'Create a GitHub issue',
    parameters: { type: 'object', properties: { repo: { type: 'string' }, title: { type: 'string' } } },
    confirm: true,
    run: (args, ctx) => createIssue(ctx.preferences.token, args),
  }],
})

Theming

Looks native in every app.

Start from a preset, override any CSS variable, or bring your own classes. Light and dark follow your app automatically.

Open the theme builder

Performance

Fast at any size.

3.5KBgzipped to boot. The UI loads when the browser is idle.

100krows, virtualized. Scrolling stays at 60fps.

~3msto rank 10,000 commands on each keystroke.

0dependencies. No React needed, no CSS-in-JS, no runtime.

Compare

More than a command palette.

Great libraries paved the way. Qikbar adds the product layer on top: views, actions, data, AI and extensions.

	Qikbar	cmdk	kbar	ninja-keys
Works without React	✓	—	—	✓
Styled out of the box	✓	—	Partly	✓
Async data sources	Built in	Manual	Manual	—
Nested views	List, grid, detail, form, chat	Manual	Nested actions	Nested actions
Action panel & secondary actions	✓	—	—	—
Inline arguments	✓	—	—	—
AI chat that runs commands	✓	—	—	—
Extensions with preferences	✓	—	—	—
Theme presets	14	—	—	Light/dark
Frecency ranking	✓	—	—	—

Based on each library’s documentation as of October 2026. “Manual” means possible with your own code.

FAQ

Questions, answered.

More in the docs FAQ, or ask the AI in the bar. Press Tab after typing your question.

Is Qikbar really free?

Yes. It’s MIT licensed with no paid tier, no telemetry and no account. AI features use your own provider and keys.

Do I need React?

No. The core is plain TypeScript with zero dependencies and works anywhere. @qikbar/qikbar/react is an optional thin wrapper.

How big is it?

About 3.5 KB gzipped boots the shell that listens for ⌘K. The full UI (about 35 KB gzipped) loads when the browser is idle.

Can the AI do things in my app?

Yes. Your commands, routes and sources become tools the model can call. Destructive actions ask the user to confirm first.

Where do API keys live?

On your server, with createHandler from @qikbar/qikbar/server and proxy() in the browser. Or let users bring their own key, stored only in their browser.

Will it match my design?

Pick one of 14 presets or map its 30+ CSS variables onto your design tokens. It follows your app’s light and dark mode automatically.

Free. Open source. Yours.

Qikbar started as a paid SaaS. Now it’s MIT licensed and community driven, with no accounts, no tracking and no API keys required.

Get started Star on GitHub

The command baryour app deserves.

From zero to ⌘K in three steps.

Install

Describe your app

Press ⌘K

One package. Every feature you’d build yourself.

Instant fuzzy search

Routing built in

Views, not just lists

Live data sources

AI that takes action

Extensions API

Themeable to the pixel

Keyboard first

Zero dependencies

Type what you want. It does it.

A few lines to a great search experience.

Built for the apps people use all day.

SaaS dashboards

Documentation sites

Internal tools

Developer tools

Let your coding agent do it.

Build once, share everywhere.

Looks native in every app.

Fast at any size.

More than a command palette.

Questions, answered.

Free. Open source. Yours.

The command bar
your app deserves.