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 }) {
return (
<Fragment>
<div className="aa-ItemIcon">
<img src={item.image} alt={item.name} width="40" height="40" />
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{snippetHit({ hit: item, attribute: 'name' })}
</div>
<div className="aa-ItemContentDescription">
{snippetHit({ hit: item, attribute: 'description' })}
</div>
</div>
<div className="aa-ItemActions">
<button
className="aa-ItemActionButton aa-TouchOnly 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>
</Fragment>
);
},
},
});

If your renderer doesn't support Fragments, you can use div.aa-ItemWrapper.

Link item#

To wrap an item within a link, use the .aa-ItemLink class.

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 <div className="aa-ItemContent">No results for this query.</div>;
},
// ...
},
});

Additional CSS classes#

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

Modifiers#

  • .aa-ItemIcon--no-border removes the border of the icon
  • .aa-ItemIcon--align-top aligns the icon to the top (recommended when 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-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" />
Edit this page