Install All Required Libraries and Dependencies

Welcome! Before using our pre-built components, take a few minutes to set up your project environment. This guide will walk you through installing all the necessary libraries like Tailwind CSS, Framer Motion, Formik, and more — so everything works smoothly out of the box.

1. Install and config Tailwind CSS

Because all components use Tailwind CSS, so we need to install the Tailwind CSS lib

1.1 Install Tailwind CSS

If you create a new NextJs project automatic, you will be install TailwindCss by default, so you do not need to install TailwindCss again. You can refer this my docs

If you want to install Tailwind Css manually, please refer this document link from the Tailwind css official.

1.2 Setup some config in Tailwind CSS

Since every website needs a primary color to maintain visual identity, it's important to set up a main color (and optionally some secondary colors). This color will be reused across multiple components, helping to keep your website’s design consistent and cohesive.

ts
export default {
  ...
  theme: {
    ...
    extend: {
      ...
      colors: {
        primary: "#f59e0b",
        second: "#fbbf24",
        ...
      },
    },
  },
  ...
} satisfies Config;

2. Install clsx, tailwind-merge libs for handling className

We will create a new function which is a utility helper designed to simplify the handling of className values. It ensures that class names are properly merged and any conflicts are resolved, leading to more consistent and maintainable component styling.

2.1 Install clsx

We use clsx to construct className strings conditionally.

bash
yarn add clsx
or
npm install clsx

2.2 Install tailwind-merge

We use tailwind-merge to efficiently merge Tailwind CSS classes in JS without style conflicts.

bash
yarn add tailwind-merge
or
npm install tailwind-merge

2.3 Create the useful function to handle the classname

Create a file utils/cn.ts then paste this code below

js
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

/**
 * The cn function is a utility helper designed to simplify the handling of className
 * values. It ensures that class names are properly merged and any conflicts are resolved,
 * leading to more consistent and maintainable component styling.
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Install Formik and Yub to handle Form

To manage form logic, we’ll use Formik for handling the form and Yup to validate the form fields.

3.1 Install Formik

bash
yarn add formik
or
npm install formik

3.2 Install Yub

bash
yarn add yup
or
npm install yup

4. Install Framer Motion

To add animations for all components, we will use Framer Motion

bash
yarn add framer-motion
or
npm install framer-motion

Great! You're all set to use the components — just click here!