Search

Quiet centers the navbar search control on wide screens. It does not implement a search engine or replace your provider's SearchBar.

This documentation site uses Biel. Without a configured project or another installed search provider, no search bar appears.

Biel

Paid plans

Biel offers paid plans. Use code QUIET to get your first month free.

Install the plugin using Ask AI. It loads the official search and assistant controls.

Use the same project for the plugin and search:

docusaurus.config.js
const project = process.env.BIEL_PROJECT_ID;

export default {
  plugins: project ? [["docusaurus-biel", { project }]] : [],
  customFields: { bielProject: project || null },
  themeConfig: {
    navbar: { items: [{ type: "search", position: "right" }] },
  },
};

Add the Biel control, with a fallback to the site's installed provider:

src/theme/SearchBar/index.jsx
import React from "react";
import SearchBar from "@theme-original/SearchBar";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";

export default function SiteSearchBar() {
  const { siteConfig } = useDocusaurusContext();
  const project = siteConfig.customFields?.bielProject;
  if (!project) return <SearchBar />;
  return (
    <biel-search-button
      project={project}
      header-title="Ask AI"
      button-style="rounded"
      clean-titles="true"
    >
      Search or ask AI
    </biel-search-button>
  );
}

Index your published documentation website in Biel before testing search results. Repository sources can supply context to Ask AI, but do not populate the widget's web-page search.

Use your public project ID, never a server API key. With no project, the adapter delegates to the installed provider. Classic itself renders no search control.

Width

Override the width in your site's CSS if your navigation needs more room:

.quiet-navbar-search {
  width: min(440px, 34vw);
}

Test the search dialog, keyboard shortcut, result links and focus return on desktop and mobile.

Biel​

Width​

Biel

Width