Customize Algolia React components with Tailwind classes
Tags: javascript, tailwindcss
Published: 2022-07-19 19:46:45

While I was at Algolia's Paris office last week, [Dhaya Benmessaoud](https://twitter.com/_dhaya_) 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](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react-hooks/#style-your-widgets) into your Algolia React components. 

This is excellent news for people who use class-based CSS frameworks like [Bootstrap](https://getbootstrap.com/) and [Tailwind](https://tailwindcss.com/)! In my case, I was working with the Algolia [Ecommerce UI Template](https://www.algolia.com/developers/code-exchange/frontend-tools/ecommerce-pwa-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw0qqjjzug7ykvgc8cwe.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wau13ml60m7aww6gtoqx.png)
 
And here's the code:

```js
<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](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react-hooks/#style-your-widget). If you're new to Algolia, you can try it out by signing up for a [free tier account](https://www.algolia.com/users/sign_up?utm_source=blog&utm_medium=devto&utm_campaign=devrel&utm_id=customize-with-tailwind).

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