Skip to main content
InstantSearch.css is the official CSS library for styling InstantSearch-powered search experiences across all flavors.

​
Overview

InstantSearch.css provides pre-built themes and component styles that work with:
  • InstantSearch.js
  • React InstantSearch
  • Vue InstantSearch
  • Angular InstantSearch
​
Version
string
8.11.0
​
License
string
MIT

​
Installation

npm install instantsearch.css

​
Available Themes

InstantSearch.css includes three ready-to-use themes:

​
Algolia Theme

The official Algolia-branded theme with blue accents. 
import 'instantsearch.css/themes/algolia.css';
Color palette:
  • Primary: Algolia Blue (rgb(0, 174, 255))
  • Accent: Koromiko (rgb(255, 193, 104))
  • Text: Port Gore (rgb(58, 69, 112))

​
Satellite Theme

A modern, neutral theme suitable for any brand. 
import 'instantsearch.css/themes/satellite.css';

​
Reset Theme

Minimal reset styles without any theming. Use this as a foundation for custom themes. 
import 'instantsearch.css/themes/reset.css';
The reset styles are included in both the Algolia and Satellite themes. You don’t need to import the reset separately when using a full theme.

​
Quick Start

​
With InstantSearch.js

import instantsearch from 'instantsearch.js';
import { searchBox, hits } from 'instantsearch.js/es/widgets';
import 'instantsearch.css/themes/satellite.css';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'),
});

search.addWidgets([
  searchBox({ container: '#searchbox' }),
  hits({ container: '#hits' }),
]);

search.start();

​
With React InstantSearch

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';
import 'instantsearch.css/themes/algolia.css';

function App() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="instant_search"
    >
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
}

​
With Vue InstantSearch

<template>
  <ais-instant-search :search-client="searchClient" index-name="instant_search">
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import 'instantsearch.css/themes/satellite.css';

export default {
  data() {
    return {
      searchClient: algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'),
    };
  },
};
</script>

​
Component Styles

In addition to full themes, you can import individual component styles:

​
Autocomplete Component

import 'instantsearch.css/components/autocomplete.css';
// or minified
import 'instantsearch.css/components/autocomplete-min.css';

​
Chat Component

import 'instantsearch.css/components/chat.css';
// or minified
import 'instantsearch.css/components/chat-min.css';

​
Styled Widgets

All InstantSearch widgets have CSS classes that work with InstantSearch.css:

Search

  • SearchBox
  • Autocomplete

Results

  • Hits
  • InfiniteHits
  • Stats

Filtering

  • RefinementList
  • Menu
  • HierarchicalMenu
  • RangeSlider
  • RangeInput
  • ToggleRefinement
  • NumericMenu
  • RatingMenu

Navigation

  • Pagination
  • Breadcrumb

Metadata

  • PoweredBy
  • CurrentRefinements
  • ClearRefinements

Advanced

  • DynamicWidgets
  • GeoSearch
  • Panel
  • RelevantSort
  • SortBy

​
Dark Mode Support

InstantSearch.css includes built-in dark mode support: 
<!-- Enable dark mode by adding data-theme attribute -->
<html data-theme="dark">
  <!-- your app -->
</html>

<!-- Or use a CSS class -->
<div class="dark">
  <!-- your search UI -->
</div>
Dark mode color scheme:
  • Text: rgb(255, 255, 255)
  • Primary: rgb(110, 160, 255)
  • Background: rgb(38, 38, 38)
  • Border: rgb(100, 100, 100)

​
Browser Support

InstantSearch.css supports the last two versions of major browsers:
  • Chrome
  • Edge
  • Firefox
  • Safari

​
Next Steps

Custom Themes

Learn how to create custom themes using CSS variables

CSS Classes

Explore the complete CSS class reference

Build docs developers (and LLMs) love

Get started for freeTalk to us