autocomplete-theme-classic

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.

Installation#

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:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@alpha"
/>

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.

CSS

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

Make sure to load these styles after the theme.

Templates#

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.

Item#

Here's the markup for an item template.

autocomplete({
  // ...
  templates: {
    item({ item, components }) {
      return (
        <div className="aa-ItemWrapper">
          <div className="aa-ItemContent">
            <div className="aa-ItemIcon">
              <img src={item.image} alt={item.name} width="40" height="40" />
            </div>
            <div className="aa-ItemContentBody">
              <div className="aa-ItemContentTitle">
                <components.Snippet hit={item} attribute="name" />
              </div>
              <div className="aa-ItemContentDescription">
                <components.Snippet hit={item} attribute="description" />
              </div>
            </div>
          </div>
          <div className="aa-ItemActions">
            <button
              className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
              type="button"
              title="Select"
            >
              <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="currentColor"
              >
                <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" />
              </svg>
            </button>
          </div>
        </div>
      );
    },
  },
});

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.

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

Header#

Here's the markup for a header template.

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

No results#

Here's the markup for a noResults template.

autocomplete({
  // ...
  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.

Modifiers#

.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

Utilities#

.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" />