DEV Community 👩‍💻👨‍💻

Cover image for Customize Algolia React components with Tailwind classes
Chuck Meyer for Algolia

Posted on • Originally published at algolia.com

Customize Algolia React components with Tailwind classes

While I was at Algolia's Paris office last week, Dhaya Benmessaoud from our Front-end Experience team showed me a nifty 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) and 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 excellent 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:

Screenshot of Trending Facets without 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 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 for 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 clean capsule shape with some simple hover styling. Here's how my component looks after styling.

Screenshot of Trending Facets with 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}
/>
Enter fullscreen mode Exit fullscreen mode

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.

I'd love to see other examples of well-styled search experiences in the comments!

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!