Search by Algolia

Sorry, there is no results for this query

Customizing Algolia React components with Tailwind classes
facebookfacebooklinkedinlinkedintwittertwittermailmail

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:

Unstyled category list

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 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 nice capsule shape with some simple hover styling. Here’s how my component looks after styling.

Tailwind styled category list

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.

About the author
Chuck Meyer

Sr. Developer Relations Engineer

githubtwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

How we built the real demo for our fake CSS API client
engineering

Tim Carry

Deep Diving into Vue InstantSearch Version 2
engineering

Haroen Viaene

JavaScript Library Developer

Small but impactful search UX tips for mobile web
engineering

Haroen Viaene

JavaScript Library Developer