AI featuresAsk FernSetup

Standalone search widget

View as Markdown

The @fern-api/search-widget package provides a standalone React component that brings Ask Fern’s AI-powered search to any React application outside of your Fern Docs site. Embed a search modal in your dashboard, marketing site, or internal tool so users can find relevant documentation without leaving their workflow.

Search widget embedded in a dashboard. Try the live demo or browse the demo source.

Prerequisites

  • React 19 — all other dependencies are bundled.
  • A live, cloud-hosted Fern Docs site with Ask Fern enabled — the widget connects to your published docs site at runtime. Self-hosted and local preview environments aren’t supported.
  • Public documentation — the widget only supports public docs. If your site uses authentication, the widget will only return unauthenticated results.

Getting started

1

Install the package

$npm install @fern-api/search-widget react@19 react-dom@19
2

Add the search modal

Import SearchModal and the bundled styles, then render the component with your docs domain. The component renders a button that opens a search modal when clicked.

1import { SearchModal } from '@fern-api/search-widget';
2import '@fern-api/search-widget/styles';
3
4function App() {
5  return (
6    <SearchModal domain="https://docs.example.com" lang="en">
7      Search Docs
8    </SearchModal>
9  );
10}
3

Customize the trigger button

The SearchModal component renders a button that opens the search modal. Style it with className, style, or target the default fern-search-button class. All standard HTML button attributes are forwarded.

1<SearchModal
2  domain="https://docs.example.com"
3  lang="en"
4  className="my-search-button"
5>
6  Search Docs
7</SearchModal>

Properties

All standard HTML button attributes are also supported and forwarded to the trigger button.

domain
stringRequired

The URL of your published Fern Docs site (for example, https://docs.example.com).

lang
stringDefaults to en

Language code for the search interface.

icon
React.ReactNode

Icon element to display in the button.

className
string

CSS class names for the trigger button.

style
React.CSSProperties

Inline styles for the trigger button.

children
React.ReactNode

Button content (text, icons, etc.).

disabled
boolean

Disables the button.

onClick
function

Additional click handler that runs before the modal opens.