Development Environment Setup | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

  • Set up a Yext Pages project
  • Install Search UI React


Check out the list of development dependencies for what you need to get started.

1. Create Your Project

Search UI React is compatible with Yext Pages , Vite, Create React App, Next.js , and more.

This tutorial will be built on Yext Pages. Before you get started, be sure that you have the latest version of the Yext CLI installed and a blank playground account.

Log in to your sandbox account with the Yext CLI:

yext init -u sandbox [YOUR_PLAYGROUND_ACCOUNT_ID]

In your terminal, run the following command:

yext pages new

When prompted, select Create a new repo, and select the Search UI React Track Starter. Call your new repo tt-job-search. It is recomended to set up a remote repository for your new repo as this will allow you to easily deploy your new project later on.

Be sure to select yes when prompted to install dependencies and whether or not to populate your Content with seed data.

2. Install the Library with a Package Manager

Navigate to your new project in the terminal:

cd tt-job-searcher

Install the Search UI React by running the following command:

npm install @yext/search-ui-react @yext/search-headless-react

3. Configure Tailwind CSS

Configure Content Paths

The Search React UI components work best with  Tailwind CSS . Tailwind has already been installed and configured in the project that you just cloned. However, you still need to add the path to where Search UI React lives within node_modules to tailwind.config.js . This will apply Tailwind CSS to the Search UI components.

Replace the contents of tailwind.config.cjs by copy and pasting the code below.

// tailwind.config.cjs

// The following import is the path to where the component source code lives
const { ComponentsContentPath } = require("@yext/search-ui-react");

module.exports = {
  content: [
    // tailwind is applied to the components by adding the component path here
  theme: {
    // the default theme is extended with custom styling used by the components
    extend: {
      colors: {
        primary: "var(--primary-color, #2563eb)",
        "primary-light": "var(--primary-color-light, #dbeafe)",
        "primary-dark": "var(--primary-color-dark, #1e40af)",
        neutral: "var(--neutral-color, #4b5563)",
        "neutral-light": "var(--neutral-color-light, #9ca3af)",
        "neutral-dark": "var(--neutral-color-dark, #1f2937)",
      borderRadius: {
        cta: "var(--cta-border-radius, 1rem)",
      keyframes: {
        rotate: {
          "100%": { transform: "rotate(360deg)" },
        dash: {
          "0%": { transform: "rotate(0deg)", "stroke-dashoffset": 204 },
          "50%": { transform: "rotate(45deg)", "stroke-dashoffset": 52 },
          "100%": { transform: "rotate(360deg)", "stroke-dashoffset": 204 },
  plugins: [
      strategy: "class",
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    Which CSS framework are you using with the Search UI React components?

    Error Success Question 2 of 2

    Which of the following commands will install Search UI React?

    Wahoo - you did it! 🙌

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect