Skip to main content
Version: 2.4.0

Introduction

ABP React is a collection of React packages that provide UI components and services for building applications with the ABP Framework. It offers a modern, TypeScript-first approach with pre-built modules for authentication, identity management, permissions, multi-tenancy, and more.

Quick Start​

Get started with ABP React in seconds using our project generator:

npx create-abp-react my-app
cd my-app
pnpm dev

That's it! You now have a fully configured ABP React project with all dependencies installed.

Why ABP React?​

  • Instant Setup - Create a new project with a single command using create-abp-react
  • Ready-to-use Components - Pre-built login forms, user management tables, permission modals, and more
  • ABP Integration - Seamlessly connects to ABP backend APIs with built-in services
  • TypeScript First - Full type safety across all packages
  • Modern Stack - Built with React 19, Redux Toolkit, and Chakra UI v3
  • Modular Design - Install only what you need

Packages​

ABP React consists of 14 packages split between free and pro modules.

Free Packages​

Works with the open-source ABP Framework.

Pro Packages​

These packages are free to use but require the corresponding backend modules from ABP Commercial.

Quick Example​

import { useAuth, useLocalization } from '@abpjs/core';
import { LoginForm } from '@abpjs/account';

function App() {
  const { isAuthenticated, logout } = useAuth();
  const { t } = useLocalization();

  if (!isAuthenticated) {
    return <LoginForm onSuccess={() => console.log('Logged in!')} />;
  }

  return (
    <div>
      <h1>{t('Welcome')}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Requirements​

  • Node.js 18.0 or higher
  • pnpm (recommended) or npm/yarn
  • ABP Framework backend (v7.x or v8.x recommended)

Current Version​

This documentation covers ABP React v1.1.0.

Next Steps​