Getting Started

UI was designed for usage with Next.js and TailwindCSS. Here’s how to set up your project in just a few steps:

1. Create a project with Next.js (optional)

   Start by creating a new project with Next.js. If you already have an existing project, you can skip this step.

   pnpm

   pnpm create next-app@latest

   bun

   bun create next-app@latest

   yarn

   yarn create next-app@latest

   npm

   npx create-next-app@latest

   Remember to choose to use Tailwind CSS when creating the project.

2. Update the dependencies

   After creating a project with Next.js, you will have already installed some obvious dependencies from a React-based project. Please, check your package.json file to see if your React, React-DOM, Tailwind CSS and Typescript versions are compatible with Inpulse UI.

   {
     "devDependencies": {
       ...
       "@types/react": "*",
       "@types/react-dom": "*",
       "typescript": "^5.0",
       ...
     }
     "dependencies": {
       ...
       "react": "^18.2 || ^19.0",
       "react-dom": "^18.2 || ^19.0",
       "tailwindcss": "^4.1",
       ...
     }
   }

   The following dependencies are mandatory for all UI components to work properly. Please add them to your package.json file.

   {
     "dependencies": {
       ...
       "@inpulse-ui/core": "^4.0",
       "@inpulse-ui/slot": "^3.0.2",
       "tailwind-merge": "^3.3",
       "tailwind-variants": "^2.1"
       ...
     }
   }

   The dependencies below are required for some specific components, specially if you’re dealing with forms. You can install them in a case-by-case basis to keep your project lightweight. Please check the peerDependencies of each component’s package for more information.

   If you don’t want to worry about this right now, you can install all at once to avoid any issues during the development.

   {
     "dependencies": {
       ...
       "@hookform/resolvers": "^5.2",
       "@inpulse-ds/button": "^3.0",
       "@inpulse-ui/icons": "^4.0.1",
       "@inpulse-ui/loading": "^3.0.2",
       "@inpulse-ui/visually-hidden": "^3.0.2",
       "date-fns": "^4.1",
       "react-hook-form": "^7.6",
       "zod": "^4.0"
       ...
     }
   }

   After editing the package.json file, run the installation command.

   pnpm

   pnpm i

   bun

   bun i

   yarn

   yarn i

   npm

   npm i

3. Configure shortcuts (optional)

   We use @ as a shortcut when importing files. This configuration can be done in tsconfig.json.

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./*"]
       }
     }
   }

4. Load component styles

   Locate the globals.css file inside the styles folder and add the following lines to import the components styles.

   /* Init Inpulse UI styles */
   @import "@inpulse-ui/core/theme.css";
   @import "@inpulse-ui/core/utilities.css";
   @source "../../node_modules/@inpulse-ui";

Done! You can now start adding the components you need to your project. Happy coding!