Skip to main content


The Classic theme provides styling for Autocomplete experiences.

The theme is designed as a neutral and clean starter. You can use it as a base and customize it with CSS variables.

If you want to build your own theme, you can start from the Classic theme and adjust it.


First, you need to install the theme.

yarn add @algolia/autocomplete-theme-classic@alpha
# or
npm install @algolia/autocomplete-theme-classic@alpha

Then import it in your project:

import '@algolia/autocomplete-theme-classic';

If you don't use a package manager, you can link the stylesheet in your HTML:


CSS variables#

The theme uses CSS variables that you can customize in your own CSS.

  • --aa-base-unit (number) the base value used to calculate font sizes and spacing
  • --aa-font-size (length) a fixed font size
  • --aa-spacing-factor (number) the base value used to calculate spacing increments
  • --aa-spacing (length) a fixed spacing value
  • --aa-spacing-half (length) a fixed half spacing value
  • --aa-icon-size (length) a fixed icon size value
  • --aa-primary-color (color) the accent color
  • --aa-muted-color (color) the muted color
  • --aa-selected-color (color) the color for selected, active or focused elements
  • --aa-icon-color (color) the color for the icon
  • --aa-text-color (color) the global text color
  • --aa-content-text-color (color) the text color for the content title and description
  • --aa-background-color (color) the global background color
  • --aa-background-color-alpha-0 (color) the background color with a 0 alpha layer (useful for gradients on Safari)
  • --aa-panel-shadow (box-shadow) the shadow for the panel
  • --aa-panel-max-height (length) the maximum height for the panel before showing a vertical scroll bar
  • --aa-detached-media-query (media query) the media query to enable detached mode on smaller devices
  • --aa-detached-modal-media-query (media query) the media query to enable detached mode on bigger devices
  • --aa-detached-modal-max-width (length) the maximum width of the modal in detached mode
  • --aa-detached-modal-max-height (length) the maximum height of the modal in detached mode

To customize a value, you can create a custom stylesheet and override the variable.

:root {
--aa-icon-size: 24px;

Make sure to load these styles after the theme.


For the theme to work out of the box, you need to use a conventional CSS class set. All class names from the theme come with an aa- namespace to avoid interfering with your own styles.


Here's the markup for an item template.

// ...
templates: {
item({ item, components }) {
return (
<div className="aa-ItemWrapper">
<div className="aa-ItemContent">
<div className="aa-ItemIcon">
<img src={item.image} alt={} width="40" height="40" />
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<components.Snippet hit={item} attribute="name" />
<div className="aa-ItemContentDescription">
<components.Snippet hit={item} attribute="description" />
<div className="aa-ItemActions">
className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
viewBox="0 0 24 24"
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />

Link item#

To wrap an item within a link, use the .aa-ItemLink class in place of the element with .aa-ItemWrapper. Make sure not to use both together.

// ...
templates: {
item({ item }) {
return (
<a className="aa-ItemLink" href={item.url}>
{/* ... */}


Here's the markup for a header template.

// ...
templates: {
header() {
return (
<span className="aa-SourceHeaderTitle">Products</span>
<div className="aa-SourceHeaderLine" />
// ...

No results#

Here's the markup for a noResults template.

// ...
templates: {
noResults() {
return 'No products for this query.';
// ...

Additional CSS classes#

The theme provides a set of optional classes for you to use in different contexts.


  • .aa-ItemIcon--noBorder removes the border of the icon
  • .aa-ItemIcon--alignTop aligns the icon to the top (recommended when the template is longer than three lines)
  • .aa-ItemIcon--picture makes the icon larger (recommended when using an image and the template is longer than three lines)
  • .aa-Panel--scrollable declares the scrollable container(s) of the panel


  • .aa-ActiveOnly displays an element only when the item is active
  • .aa-DesktopOnly displays an element only on desktop devices
  • .aa-TouchOnly displays an element only on touch devices

Dark mode#

The theme supports dark mode. You can enable it on the body tag in two different ways:

  • <body data-theme="dark" />
  • <body class="dark" />