paint-brush
Using Tailwind Classes to Customize Algolia React Componentsby@algolia
261 reads

Using Tailwind Classes to Customize Algolia React Components

by AlgoliaApril 19th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Algolia provides a couple of pre-built themes for search experiences as well as the ability to create custom themes. Recently, the front-end experience team has added a third way to style your UI, by [injecting custom CSS classes] into your Algolia React components.
featured image - Using Tailwind Classes to Customize Algolia React Components
Algolia HackerNoon profile picture


While I was at Algolia’s Paris office last week, Dhaya Benmessaoud from our Front-end Experience team showed me a cool trick for styling Algolia’s React widgets in your UI. Out-of-the-box, Algolia provides a couple of pre-built themes for search experiences (Algolia and Satellite) as well as the ability to create custom themes. Recently, the front-end experience team has added a third way to style your UI, by injecting custom CSS classes into your Algolia React components.


This is great news for people who use class-based CSS frameworks like Bootstrap and Tailwind! In my case, I was working with the Algolia Ecommerce UI Template, which relies on Tailwind for styling. I wanted to add a <TrendingFacets> widget from the Algolia Recommend UI library to my homepage, but I wanted to style it using Tailwind classes to match the rest of my front-end.


Here’s how it looks before styling:


I can definitely do better! To accomplish this, I need to use the classNames attribute for my component. It’s available for all of Algolia’s React widgets (including Recommend) and it allows you to override styling on component-specific elements. Some of our other front-end APIs like Vanilla JavaScript (cssClasses) and Vue (class-names) have had this functionality for years, and now it’s available in React thanks to the recent refresh that added React hooks.


The documentation lists the elements I can override for each Algolia widget. For instance, here are the elements of a <SearchBox> widget:


  • root: The root element of the widget.
  • form: The form element.
  • input: The input element.
  • submit: The submit button.
  • reset: The reset button.
  • loadingIndicator: The loading indicator element.
  • submitIcon: The submit icon.
  • resetIcon: The reset icon.
  • loadingIcon: The loading icon.


For my <TrendingFacets> widget, I want the list in a horizontal line to conserve space, so I add a flex class to its list element. I’ll also add a new facetItem class to give each item a nice capsule shape with some simple hover styling. Here’s how my component looks after styling.



And here’s the code:

<TrendingFacets
  classNames={{ list: 'flex', item: 'facetItem' }}
  recommendClient={recommendClient}
  indexName={indexName}
  maxRecommendations={3}
  itemComponent={({ item }) => (
    <a href={item.facetValue}>{item.facetValue}</a>
  )}
  facetName={facetName}
/>


Adding classNames to customize the style of Algolia widgets makes so much sense, especially for people like me who are addicted to Tailwind CSS for styling front-ends. You can read more about adding custom CSS classes to widgets in the Algolia documentation. If you’re new to Algolia, you can try it out by signing up for a free tier account.



Also published here.