Skip to main content

Installation

What you'll learn
  • How to install @js-smart/react-kit and its peer dependencies
  • How to verify your setup and resolve common install issues
Prerequisites
  • Node.js 20+ (22 LTS recommended)
  • A React project with MUI 9 and TanStack Router (or install them below)

Install the library and its peer dependencies in your React project:

npm install @js-smart/react-kit

React Kit has peer dependencies that your project should satisfy (they are often already present in MUI-based apps):

  • react and react-dom (^19.0.0)
  • @mui/material (^9.1.0)
  • @emotion/react (^11.14.0) and @emotion/styled (^11.14.0) — required by MUI
  • @mui/icons-material (^9.1.0) — used by several components
  • @tanstack/react-router (^1.161.1) — for link and navigation components (RouterLink, NextLink, GoBackButton, OpenInNewIconLink)

If you start from a minimal React app, install MUI, Emotion, icons, and TanStack Router:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled @tanstack/react-router

Usage example​

After installing React Kit, import and use components or utilities in your app:

Using a component

import { SuccessButton } from '@js-smart/react-kit';

function MyForm() {
	return <SuccessButton onClick={() => handleSave()}>Save</SuccessButton>;
}

Using a utility

import { isBlankOrEmpty } from '@js-smart/react-kit';

const isEmpty = isBlankOrEmpty(input); // true if null, undefined, or blank string

For more examples, see the Introduction page or the react-kit-demo app.

Troubleshooting​

Peer dependency warnings

If you see peer dependency warnings for @mui/material, @mui/icons-material, react, or react-dom, install the versions React Kit expects (see the list above). For example:

pnpm add react@^19 react-dom@^19 @mui/material@^9 @mui/icons-material@^9 @emotion/react @emotion/styled

"Module not found" or import errors

  • Ensure the package is installed: @js-smart/react-kit appears in your package.json dependencies.
  • Restart the dev server and clear any cache (e.g. delete node_modules/.cache if present).

Styles or MUI theme not applied

React Kit components rely on MUI. Wrap your app (or the part that uses React Kit) with ThemeProvider from @mui/material and ensure MUI's CSS is loaded. See MUI installation.

TypeScript errors

Ensure your project uses TypeScript 5.x and that @types/react and @types/react-dom are compatible with your React version (19.x).

Next steps​

  • Read the Introduction for an overview and available components/utilities.
  • Browse the Docs sidebar for detailed component and utility documentation.
  • Run the react-kit-demo app locally to explore components.
  • Check the GitHub repository for source code, issues, and contributions.