Styling Without Tailwind

Who does this article apply to?

Enterprise, Partner, and Small Business accounts.
Accounts in all regions.

If you are not inclined to use Tailwind, you can optionally import the bundle.css stylesheet:

import '@yext/search-ui-react/bundle.css'

This will use the component library's styling without adding Tailwind, allowing you to customize the components with whatever CSS style you choose.

For example, if you wanted to use vanilla CSS you could do so by importing a CSS file and referencing it in your component's customCssClasses property:

import "./App.css";
import "@yext/search-ui-react/bundle.css";

function App() {
  return <SearchBar customCssClasses={{ container: "search-container" }} />;
}