Table of Contents#

• Vite React Application
• Next JS Application

Vite React Application#

Setting Up Keep React in Vite React Application

1. Step 1

   Create a Vite React Application

   Replace `my-project` with your preferred project name.

   Vite-React

   npm create vite@latest my-project -- --template react
   cd my-project

2. Step 2

   Install Tailwind CSS

   Install-Tailwind-CSS

   npm i autoprefixer postcss tailwindcss
   npx tailwindcss init -p

3. Step 3

   Install Keep React library

   npmyarnpnpm

   npm i keep-react phosphor-react

4. Step 4

   Configure Tailwind CSS

   Open the `tailwind.config.js` file in your project. Wrap your config with the keepTheme function to achieve keep-react configuration.

   tailwind.config.jstailwind.config.ts

   import { keepTheme } from "keep-react/keepTheme";
   
   const config = {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {},
   }
   
   export default keepTheme(config);

5. Step 5

   Add Tailwind CSS to index.css

   src/index.css

   @import "keep-react/css";
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

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.

import { Button } from "keep-react";
  
const App = () => {
  return (
    <Button>Keep React</Button>
  )
}

export default App;

Next JS Application#

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

1. Step 1

   Create a NextJS application

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

   Create-NextJS-Project

   npx create-next-app@latest

2. Step 2

   Install Keep React library

   npmyarnpnpm

   npm i keep-react phosphor-react

3. Step 3

   Configure Tailwind CSS

   Open the `tailwind.config.js` file in your project. Wrap your config with the keepTheme function to achieve keep-react configuration.

   tailwind.config.jstailwind.config.ts

   import { keepTheme } from "keep-react/keepTheme";
   
   const config = {
     content: [
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {},
   };
   
   export default keepTheme(config);

4. Step 4

   Add Tailwind CSS to `app/globals.css` File

   app/globals.css

   @import "keep-react/css";
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

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

import { Button } from "keep-react";

const page = () => {
  return (
    <Button>Keep React</Button>
  )
}
    
export default page;