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 into your Algolia injecting custom CSS classes React components. This is great news for people who use class-based like Bootstrap and ! In my case, I was working with the Algolia , which relies on Tailwind for styling. I wanted to add a 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. CSS frameworks Tailwind Ecommerce UI Template <TrendingFacets> Here’s how it looks before styling: I can definitely do better! To accomplish this, I need to use the 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 ( ) and Vue ( ) have had this functionality for years, and now it’s available in React thanks to the recent refresh that added React hooks. classNames cssClasses class-names The documentation lists the elements I can override for each Algolia widget. For instance, here are the elements of a widget: <SearchBox> : The root element of the widget. root : The form element. form : The input element. input : The submit button. submit : The reset button. reset : The loading indicator element. loadingIndicator : The submit icon. submitIcon : The reset icon. resetIcon : The loading icon. loadingIcon For my widget, I want the list in a horizontal line to conserve space, so I add a class to its element. I’ll also add a new class to give each a nice capsule shape with some simple hover styling. Here’s how my component looks after styling. <TrendingFacets> flex list facetItem item 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 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 . If you’re new to Algolia, you can try it out by signing up for a . classNames Algolia documentation free tier account Also published here.

This story contains new, firsthand information uncovered by the writer.

Using Tailwind Classes to Customize Algolia React Components

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Biggest Barriers to Efficient, Relevant AI Powered Search

3 Biggest Barriers to Efficient, Relevant AI Powered Search

A JavaScript API Client Can Be a SaaS Product. Find Out How.

A Simple Guide to Latent Semantic Indexing (analysis) and How it Bolsters Search

AI Is Devouring E-Commerce

AI Search Is the Next Big Thing: Here's 10 Reasons Why

3 Biggest Barriers to Efficient, Relevant AI Powered Search

3 Biggest Barriers to Efficient, Relevant AI Powered Search

A JavaScript API Client Can Be a SaaS Product. Find Out How.

A Simple Guide to Latent Semantic Indexing (analysis) and How it Bolsters Search

AI Is Devouring E-Commerce

AI Search Is the Next Big Thing: Here's 10 Reasons Why

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps