React Theme Options
Choose a theme preset for your React project.
Theme Mode
'Both' follows the system preference. 'Light' or 'Dark' locks the application to that mode.
ABP provides an official React UI option, delivered through the new modern template system, with a ready-to-use .NET backend. Authentication, API proxies, permissions, runtime configuration, localization, and a dedicated Admin Console for ABP modules are already wired, so your team can focus on building product features instead of plumbing.
ABP gives React teams built-in authentication, auto-generated APIs, permission-aware UI, and a separate Admin Console for module administration resulting in faster development and easier long-term maintenance.
In most React projects, the hard parts are not the components themselves. They are security, structure, runtime configuration, and keeping the frontend aligned with the backend as the product grows.
With ABP, OIDC authentication and authorization are already integrated, API clients are generated and kept in sync with your backend, the UI dynamically responds to roles and permissions, and the standard administration surface is delivered as a pre-built React Admin Console that ships and upgrades with ABP.
OpenID Connect with Authorization Code + PKCE, token handling, route guards, and permission-aware UI ready out of the box.
Type-safe API modules generated from your ABP backend and consumed through Axios + TanStack Query.
Clear conventions: TanStack Router routes, shadcn/ui components, Zod-validated forms, and a predictable folder layout.
A real, opinionated React solution generated by the Modern Wizard, not an empty starter.
The result: less glue code, faster delivery, and React apps that are easier to maintain, refactor, and evolve over time.
The React UI is part of ABP's modern template system and is created with ABP Studio v3.0+ through the Modern Wizard or with
abp new Acme.BookStore --modern using the ABP CLI. It ships with a curated, modern frontend stack: Vite, React, TypeScript, TanStack Router, TanStack Query, shadcn/ui, Axios, Zod, React Hook Form, and Vitest.
ABP integrates OpenID Connect (Authorization Code flow with PKCE) directly against the ABP Auth Server, with an auth provider, hooks, and route guards built in.
APIs are protected without manual wiring, and both navigation and UI behavior automatically respect the current user's roles and granted policies through usePermissions().
ABP generates type-safe API modules from your backend OpenAPI definitions and consumes them through an Axios HTTP client with interceptors and TanStack Query for server-state orchestration.
There is no need to duplicate DTOs or hand-maintain a client layer; your backend and frontend stay aligned with minimal boilerplate.
Localization is built into the React UI through i18next, ABP localization keys, and request-culture handling.
Multi-tenancy is supported end-to-end so the same React app can serve multiple tenants, making the stack a strong fit for SaaS-style applications that serve many customers or regions from a single solution.
Choose a theme preset for your React project.
'Both' follows the system preference. 'Light' or 'Dark' locks the application to that mode.
The React template ships with layout components, a sidebar, a user menu, and a shadcn/ui-based component system that lives inside your project, not behind an opaque npm package.
You can customize pages, theme tokens, sidebar items, and UI primitives directly. Runtime configuration through dynamic-env.json keeps environment-specific values outside the build.
Modern React solutions include the ABP Admin Console via Volo.Abp.AdminConsole package. Served under /admin-console/*, it automatically manages modules like Identity and SaaS.
This split is intentional: your developer-owned React app stays focused on product features while administration capabilities remain consistent, permission-checked, and upgradeable with ABP packages.
| Actions | Name | Type | Publish Date | Price | Creation Time |
|---|---|---|---|---|---|
| View Edit Delete | The Hitchhiker's Guide to the Galaxy | Science Fiction | 1995-09-27 | 42 | 2026-05-07 |
| View Edit Delete | 1984 | Dystopia | 1949-06-08 | 19.84 | 2026-05-07 |
| Actions | User name | Status | |
|---|---|---|---|
| View Edit Delete | admin | admin@abp.io | Active |
Opens the dedicated ABP Admin Console under /admin-console — manage tenants, roles, and permissions without leaving your React app's identity.
From internal tools to public-facing SaaS platforms. Built on a real, opinionated React solution rather than a hello-world starter.
Robust back-office systems backed by the built-in Admin Console.
Business process automation with permission-aware routing.
Multi-tenant platforms with OIDC, tenant resolution, and module administration ready out of the box.
Data-heavy analytics views built on TanStack Query and shadcn/ui.
ABP's React UI works especially well for teams that:
Use React with TypeScript on the frontend and .NET on the backend.
Prefer conventions over hand-rolled setup: Vite, TanStack Router/Query, shadcn/ui, Zod, React Hook Form, OIDC, Axios.
Want frontend code they actually own: generated pages live in the solution and can be opened, refactored, and redesigned freely.
Care about maintainability, testability (Vitest + React Testing Library), and long-term upgradeability.
Want to onboard new developers quickly into a predictable, documented project structure.
The React UI is shaped for the era of AI-assisted development.
Built with technologies modern AI coding assistants understand deeply.
Since the solution contains real frontend code, AI tools and ABP AI assistants can read, extend, and refactor the project alongside your team.
ABP lets you begin with a working React + .NET solution generated by the Modern Wizard in ABP Studio (or the --modern flag in the ABP CLI), then build your product features on top of it.
Start from a modern React + backend setup.
Extend it with your own pages and modules.
Rely on a consistent foundation as the project grows.
