Introduction
What you'll learn
- How to install and use @js-smart/react-kit in a React + MUI project
- Where to find component, utility, and constants documentation
Prerequisites
- A React project (Vite, Next.js, or similar)
- React 19.x
- Familiarity with MUI components
React Kit (@js-smart/react-kit) is a comprehensive collection of reusable React components and utilities built with MUI (Material UI) and TanStack Router.
The library provides UI components (buttons, dialogs, snack bars, links, progress, tables, etc.) and utility functions for dates, strings, HTTP clients, state management, and other common tasks. Use React Kit to build React applications with a flexible, type-safe, and well-documented set of building blocks.
Technologies
- React 19
- MUI (Material UI) for components and theming
- TanStack Router for navigation link components
To install the library, see Installation.
Available Components and Utilities
Components
| Component | Description |
|---|---|
| Buttons | |
| CancelButton | Cancel action button |
| DeleteButton | Delete action button |
| EditIconButton | Edit action icon button |
| ExcelButton | Excel export button |
| GoBackButton | Navigate back button |
| HistoryButton | History / list view button |
| LoadingSuccessButton | Button with loading and success state |
| ManageButton | Manage action button |
| SuccessButton | Primary success / submit button |
| Other | |
| CenteredCircularProgress | Centered loading spinner |
| ConfirmationDialog | Confirm/cancel dialog |
| DismissibleAlert | Dismissible alert message |
| NextLink | Link with href prop using TanStack Router |
| RouterLink | Typed TanStack Router link component |
| OpenInNewIconLink | Link that opens in a new tab |
| ReactIf | Conditional rendering wrapper |
| AppSnackBar | Application snack bar notifications |
| QuerySnackBar | Query-based snack bar notifications |
| Toast | Global toast notifications |
| TablePaginationActions | Table pagination controls |
| TabPanel | Accessible tab panel (with a11yProps) |
Utilities
| Utility | Description |
|---|---|
| BooleanUtils | Boolean helpers |
| CssUtils | CSS class and style helpers |
| DateUtil | Date formatting and parsing |
| NumberUtils | Number formatting and parsing |
| ProgressStateUtils | Progress/loading state helpers |
| StringUtils | String helpers (e.g. blank/empty check) |
| UrlUtils | URL building and parsing |
Types and constants
| Name | Description |
|---|---|
| ProgressState | Type for loading/success/error states |
| App Constants | System config, locale, and date format defaults |
Next steps
- Browse the Docs sidebar for component and utility documentation.
- Check the GitHub repository for source code, issues, and contributions.