Introduction - Keep React

Keep React is an open-source component library built on top of React and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications. Install Keep React in your React application or NextJs Application following step bellow.

Table of Contents#

Vite React Application#

Setting Up Keep React in Vite React Application

Step 1: Create a Vite React Application

Replace my-project with your preferred project name.

Step 2: Install Tailwind CSS

Step 3: Install Keep React library

Or

Step 4: Configure Tailwind CSS

In your project's tailwind.config.js file, insert this code snippet:

Step 5: Add Tailwind CSS to index.css

Congratulations! You've now successfully set up Keep React in your Vite React application. You can begin using components from keep-react in your project.

Next JS Application#

You can easily integrate keep-react library into your Next.js application.

Step 1: Create a new NextJS application

Ensure that you select tailwindcss as a dependency for your application during the setup.

  • Would you like to use Tailwind CSS? Yes

Step 2: Install Keep React

Or

Step 3: Update tailwind.config.js for Next.js

In the tailwind.config.js file, insert the following code into the content and presets arrays

Step 4: Add Tailwind CSS to globals.css File:

Now you can import any component from keep-react and start using it in your NextJS project.