Tailwind CSS Algolia Search - React

Use our Tailwind CSS Algolia Search example to add global search in your web projects.

See below our beautiful Aloglia Search example that you can use in your Tailwind CSS and React project. The example below is using the @docsearch/react library, make sure to install it before using the example.

Install Required Dependency

We're using @docsearch/react library to provide the search functionality. Make sure to install it before using the example.

npm install @docsearch/react
npm install @docsearch/react

Algolia Search Demo

We're using DocSearch component from the @docsearch/react library. The DocSearch component requires the appId, apiKey, and indexName as props to work.

In the below example we hide the DocSearch component and instead show a custom input field from @material-tailwind/react with a search icon. When the user clicks on the input or presses Cmd + K the DocSearch component is shown.

K
"use client";

import { DocSearch } from "@docsearch/react";
import { KeyCommand, Search } from "iconoir-react";
import { Input } from "@material-tailwind/react";

const APP_ID = "37KXIBLNGX";
const INDEX_NAME = "material-tailwind";
const API_KEY = "8cc5688018e14bad2a2528eea41fbb35";

export function AlgoliaSearchDemo() {
  return (
    <div className="group w-72">
      <Input
        readOnly
        placeholder="Input"
        className="group-hover:border-primary group-hover:ring-primary/10 group-focus:border-primary group-focus:ring-primary/10"
      >
        <Input.Icon>
          <Search className="h-full w-full" />
        </Input.Icon>
        <kbd className="absolute right-[6px] top-1/2 flex -translate-y-[calc(50%+0.5px)] items-center gap-1 rounded border border-surface bg-surface-light px-1.5 py-1 text-[11px] font-semibold text-black shadow-[0_1.5px_0_0] shadow-surface dark:text-white">
          <KeyCommand className="h-2.5 w-2.5 stroke-2" />K
        </kbd>
        <div className="absolute inset-0 m-0 w-full opacity-0 [&_>_button]:m-0 [&_>_button]:w-full [&_>_button]:rounded-none">
          <DocSearch indexName={INDEX_NAME} apiKey={API_KEY} appId={APP_ID} />
        </div>
      </Input>
    </div>
  );
}
"use client";

import { DocSearch } from "@docsearch/react";
import { KeyCommand, Search } from "iconoir-react";
import { Input } from "@material-tailwind/react";

const APP_ID = "37KXIBLNGX";
const INDEX_NAME = "material-tailwind";
const API_KEY = "8cc5688018e14bad2a2528eea41fbb35";

export function AlgoliaSearchDemo() {
  return (
    <div className="group w-72">
      <Input
        readOnly
        placeholder="Input"
        className="group-hover:border-primary group-hover:ring-primary/10 group-focus:border-primary group-focus:ring-primary/10"
      >
        <Input.Icon>
          <Search className="h-full w-full" />
        </Input.Icon>
        <kbd className="absolute right-[6px] top-1/2 flex -translate-y-[calc(50%+0.5px)] items-center gap-1 rounded border border-surface bg-surface-light px-1.5 py-1 text-[11px] font-semibold text-black shadow-[0_1.5px_0_0] shadow-surface dark:text-white">
          <KeyCommand className="h-2.5 w-2.5 stroke-2" />K
        </kbd>
        <div className="absolute inset-0 m-0 w-full opacity-0 [&_>_button]:m-0 [&_>_button]:w-full [&_>_button]:rounded-none">
          <DocSearch indexName={INDEX_NAME} apiKey={API_KEY} appId={APP_ID} />
        </div>
      </Input>
    </div>
  );
}

Adding Custom Styles (Optional)

You can copy/paste the below CSS code to your Tailwind CSS stylesheet to customise the search dialog appearance to match the @material-tailwind/react design.

/* backdrop */
.DocSearch.DocSearch-Container {
  @apply bg-black/50;
}

/* dialog */
.DocSearch.DocSearch-Container .DocSearch-Modal {
  @apply overflow-hidden rounded-none border border-surface bg-background shadow-2xl shadow-black/5;
}

@media screen and (min-width: 768px) {
  .DocSearch.DocSearch-Container .DocSearch-Modal {
    @apply rounded-xl;
  }
}

/* search input */
.DocSearch.DocSearch-Container .DocSearch-Form {
  @apply rounded-md bg-transparent shadow-[0_0_0_2px] shadow-primary;
}

.DocSearch.DocSearch-Container .DocSearch-MagnifierLabel,
.DocSearch.DocSearch-Container .DocSearch-LoadingIndicator {
  @apply text-primary;
}

.DocSearch.DocSearch-Container .DocSearch-MagnifierLabel svg,
.DocSearch.DocSearch-Container .DocSearch-LoadingIndicator svg {
  @apply stroke-2;
}

.DocSearch.DocSearch-Container .DocSearch-Input {
  @apply text-black dark:text-white placeholder:text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Reset svg {
  @apply stroke-2 text-primary;
}

/* search area */
.DocSearch.DocSearch-Container .DocSearch-Help {
  @apply text-base text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Label {
  @apply text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Dropdown {
  @apply p-3;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-source {
  @apply m-0.5 bg-transparent p-0 text-black dark:text-white;
}

.DocSearch.DocSearch-Container .DocSearch-Hit {
  @apply rounded-lg pb-2.5;
}

.DocSearch.DocSearch-Container .DocSearch-Hit a {
  @apply rounded-lg border border-surface bg-background text-foreground shadow-[0_4px_0_0] shadow-surface;
}

.DocSearch.DocSearch-Container .DocSearch-Hit[aria-selected="true"] a {
  @apply border-primary bg-primary text-primary-foreground shadow-primary-dark;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-icon {
  @apply text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-title mark {
  @apply text-primary;
}

.DocSearch.DocSearch-Container .DocSearch-Screen-Icon {
  @apply mx-auto w-max text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Prefill {
  @apply text-primary;
}
.DocSearch.DocSearch-Container .DocSearch-Cancel {
  @apply text-black dark:text-white;
}

/* footer */
.DocSearch.DocSearch-Container .DocSearch-Footer {
  @apply rounded-none border-t border-surface bg-transparent shadow-none;
}

.DocSearch.DocSearch-Container .DocSearch-Commands-Key {
  @apply w-max rounded px-1.5 py-1 text-[11px] font-semibold text-black dark:text-white shadow-[0_1.5px_0_0] shadow-surface [background:rgb(var(--color-surface-light))] [border:1px_solid_rgb(var(--color-surface))];
}
/* backdrop */
.DocSearch.DocSearch-Container {
  @apply bg-black/50;
}

/* dialog */
.DocSearch.DocSearch-Container .DocSearch-Modal {
  @apply overflow-hidden rounded-none border border-surface bg-background shadow-2xl shadow-black/5;
}

@media screen and (min-width: 768px) {
  .DocSearch.DocSearch-Container .DocSearch-Modal {
    @apply rounded-xl;
  }
}

/* search input */
.DocSearch.DocSearch-Container .DocSearch-Form {
  @apply rounded-md bg-transparent shadow-[0_0_0_2px] shadow-primary;
}

.DocSearch.DocSearch-Container .DocSearch-MagnifierLabel,
.DocSearch.DocSearch-Container .DocSearch-LoadingIndicator {
  @apply text-primary;
}

.DocSearch.DocSearch-Container .DocSearch-MagnifierLabel svg,
.DocSearch.DocSearch-Container .DocSearch-LoadingIndicator svg {
  @apply stroke-2;
}

.DocSearch.DocSearch-Container .DocSearch-Input {
  @apply text-black dark:text-white placeholder:text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Reset svg {
  @apply stroke-2 text-primary;
}

/* search area */
.DocSearch.DocSearch-Container .DocSearch-Help {
  @apply text-base text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Label {
  @apply text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Dropdown {
  @apply p-3;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-source {
  @apply m-0.5 bg-transparent p-0 text-black dark:text-white;
}

.DocSearch.DocSearch-Container .DocSearch-Hit {
  @apply rounded-lg pb-2.5;
}

.DocSearch.DocSearch-Container .DocSearch-Hit a {
  @apply rounded-lg border border-surface bg-background text-foreground shadow-[0_4px_0_0] shadow-surface;
}

.DocSearch.DocSearch-Container .DocSearch-Hit[aria-selected="true"] a {
  @apply border-primary bg-primary text-primary-foreground shadow-primary-dark;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-icon {
  @apply text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Hit-title mark {
  @apply text-primary;
}

.DocSearch.DocSearch-Container .DocSearch-Screen-Icon {
  @apply mx-auto w-max text-foreground/60;
}

.DocSearch.DocSearch-Container .DocSearch-Prefill {
  @apply text-primary;
}
.DocSearch.DocSearch-Container .DocSearch-Cancel {
  @apply text-black dark:text-white;
}

/* footer */
.DocSearch.DocSearch-Container .DocSearch-Footer {
  @apply rounded-none border-t border-surface bg-transparent shadow-none;
}

.DocSearch.DocSearch-Container .DocSearch-Commands-Key {
  @apply w-max rounded px-1.5 py-1 text-[11px] font-semibold text-black dark:text-white shadow-[0_1.5px_0_0] shadow-surface [background:rgb(var(--color-surface-light))] [border:1px_solid_rgb(var(--color-surface))];
}