Skip to main content
Version: 3.2.0

Release Notes

v3.2.0​

February 2026

Changes​

Loading Overlay Opacity Reduced​

The .abp-loading overlay background opacity has been reduced from 0.1 to 0.05 for a better user experience. The loading overlay is now more subtle and less obtrusive:

/* Before (v3.1.0) */
.abp-loading {
  background: rgba(0, 0, 0, 0.1);
}

/* After (v3.2.0) */
.abp-loading {
  background: rgba(0, 0, 0, 0.05);
}

This change is automatically applied when using THEME_BASIC_STYLES from @abpjs/theme-basic.

v3.1.0​

February 2026

  • Version alignment with @abpjs/core

v3.0.0​

February 2026

New Features​

CurrentUserComponent​

New public API component for the current user nav item:

import { CurrentUserComponent } from '@abpjs/theme-basic';

// Basic usage
<CurrentUserComponent />

// With custom URLs
<CurrentUserComponent
  loginUrl="/login"
  profileUrl="/profile"
  changePasswordUrl="/change-password"
/>

// With custom styling
<CurrentUserComponent
  containerStyle={{ padding: '4' }}
  menuZIndex={1500}
/>

Props:

PropTypeDefaultDescription
smallScreenbooleanfalseMobile mode display
loginUrlstring/account/loginLogin redirect URL
profileUrlstring/account/manageProfile page URL
changePasswordUrlstring/account/manageChange password URL
containerStyleSystemStyleObject-Custom container styles
menuZIndexnumber1400Dropdown z-index

LanguagesComponent​

New public API component for the language selector nav item:

import { LanguagesComponent } from '@abpjs/theme-basic';

// Basic usage
<LanguagesComponent />

// Compact mode (icon only)
<LanguagesComponent compact />

// With custom styling
<LanguagesComponent
  containerStyle={{ padding: '2' }}
  menuZIndex={1500}
/>

Props:

PropTypeDefaultDescription
smallScreenbooleanfalseMobile mode display
compactbooleanfalseIcon-only mode
containerStyleSystemStyleObject-Custom container styles
menuZIndexnumber1400Dropdown z-index

New provider for initializing default nav items (Languages and CurrentUser):

import { initializeThemeBasicNavItems } from '@abpjs/theme-basic';

// Call once during app initialization
initializeThemeBasicNavItems();

// This registers:
// - Languages component (order: 100)
// - CurrentUser component (order: 200)

For advanced configuration:

import {
  BASIC_THEME_NAV_ITEM_PROVIDERS,
  configureNavItems,
} from '@abpjs/theme-basic';
import { getNavItemsService } from '@abpjs/theme-shared';

const navItemsService = getNavItemsService();
configureNavItems(navItemsService)();

Styles Provider​

New provider for injecting theme-basic global CSS:

import { initializeThemeBasicStyles } from '@abpjs/theme-basic';

// Call once during app initialization
initializeThemeBasicStyles();

Access raw styles for custom injection:

import { THEME_BASIC_STYLES, injectThemeBasicStyles } from '@abpjs/theme-basic';

// Get raw CSS string
console.log(THEME_BASIC_STYLES);

// Manual injection
injectThemeBasicStyles();

New Component Keys​

New component replacement keys for CurrentUser and Languages:

import { eThemeBasicComponents } from '@abpjs/theme-basic';

// New in v3.0.0:
eThemeBasicComponents.CurrentUser  // 'Theme.CurrentUserComponent'
eThemeBasicComponents.Languages    // 'Theme.LanguagesComponent'

Deprecations​

eNavigationElementNames​

The eNavigationElementNames enum is deprecated. Nav items are now managed via NavItemsService from @abpjs/theme-shared:

// Before (deprecated)
import { eNavigationElementNames } from '@abpjs/theme-basic';

// After (v3.0.0)
import { getNavItemsService } from '@abpjs/theme-shared';

const navItemsService = getNavItemsService();
navItemsService.addItems([
  { id: 'my-nav-item', component: MyComponent, order: 1 },
]);

LayoutStateService​

The LayoutStateService and useLayoutStateService are deprecated. Use NavItemsService from @abpjs/theme-shared instead:

// Before (deprecated)
import { useLayoutStateService } from '@abpjs/theme-basic';

const layoutStateService = useLayoutStateService();
layoutStateService.dispatchAddNavigationElement({
  name: 'MyElement',
  element: <MyNavItem />,
  order: 1,
});

// After (v3.0.0)
import { getNavItemsService } from '@abpjs/theme-shared';

const navItemsService = getNavItemsService();
navItemsService.addItems([
  { id: 'MyElement', component: MyNavItem, order: 1 },
]);

Style Updates​

  • Added bordered .datatable-body-row styles for bordered table rows

New Exports​

  • CurrentUserComponent - Current user nav item component
  • CurrentUserComponentProps - Props for CurrentUserComponent
  • LanguagesComponent - Language selector nav item component
  • LanguagesComponentProps - Props for LanguagesComponent
  • initializeThemeBasicNavItems() - Initialize default nav items
  • configureNavItems(navItems) - Configure nav items with custom service
  • BASIC_THEME_NAV_ITEM_PROVIDERS - Nav item provider configuration
  • initializeThemeBasicStyles() - Inject theme-basic CSS
  • injectThemeBasicStyles() - Manual CSS injection
  • configureStyles() - Style configuration function
  • BASIC_THEME_STYLES_PROVIDERS - Style provider configuration
  • THEME_BASIC_STYLES - Raw CSS string constant
  • eThemeBasicComponents.CurrentUser - Component key for CurrentUser
  • eThemeBasicComponents.Languages - Component key for Languages

v2.9.0​

February 2026

Breaking Changes​

  • RoutesComponent.isDropdownChildDynamic prop removed - This prop was not functional and has been removed. If you were passing this prop, simply remove it:

    // Before (v2.7.0)
    <RoutesComponent isDropdownChildDynamic={true} />

    // After (v2.9.0)
    <RoutesComponent />

Internal Changes​

  • Dependency update to @abpjs/theme-shared v2.9.0

v2.7.0​

February 2026

New Features​

Component Replacement Keys​

New constants for replacing theme components:

import { eThemeBasicComponents } from '@abpjs/theme-basic';

// Available component keys:
// eThemeBasicComponents.ApplicationLayout = 'Theme.ApplicationLayoutComponent'
// eThemeBasicComponents.AccountLayout = 'Theme.AccountLayoutComponent'
// eThemeBasicComponents.EmptyLayout = 'Theme.EmptyLayoutComponent'
// eThemeBasicComponents.Logo = 'Theme.LogoComponent'
// eThemeBasicComponents.Routes = 'Theme.RoutesComponent'
// eThemeBasicComponents.NavItems = 'Theme.NavItemsComponent'

New constants for built-in navigation elements:

import { eNavigationElementNames } from '@abpjs/theme-basic';

// Available navigation element names:
// eNavigationElementNames.Language = 'LanguageRef'
// eNavigationElementNames.User = 'CurrentUserRef'

LayoutStateService​

New service for accessing and modifying layout state:

import { useLayoutStateService } from '@abpjs/theme-basic';

function MyComponent() {
  const layoutStateService = useLayoutStateService();

  // Get current navigation elements
  const elements = layoutStateService.getNavigationElements();

  // Add a new navigation element
  layoutStateService.dispatchAddNavigationElement({
    name: 'MyElement',
    element: <MyNavItem />,
    order: 1,
  });

  // Remove an element by name
  layoutStateService.dispatchRemoveNavigationElementByName('MyElement');
}

Public API Components​

New standalone components for building custom layouts:

LogoComponent - Displays the application logo with branding support:

import { LogoComponent } from '@abpjs/theme-basic';

// Basic usage (uses branding configuration)
<LogoComponent />

// With custom link
<LogoComponent linkTo="/dashboard" />

RoutesComponent - Renders navigation routes from ABP configuration:

import { RoutesComponent } from '@abpjs/theme-basic';

<RoutesComponent />

NavItemsComponent - Renders navigation items (language selector, user menu):

import { NavItemsComponent } from '@abpjs/theme-basic';

<NavItemsComponent />

New Exports​

  • eThemeBasicComponents - Constants for component replacement keys
  • eNavigationElementNames - Constants for navigation element names
  • useLayoutStateService() - Hook to access layout state service
  • LayoutStateService - Interface for layout state service
  • LogoComponent - Public API logo component
  • LogoComponentProps - Props interface for LogoComponent
  • RoutesComponent - Public API routes component
  • NavItemsComponent - Public API nav items component

v2.4.0​

February 2026

  • Version alignment with @abpjs/core

v2.2.0​

February 2026

  • Version alignment with @abpjs/core

v2.1.0​

February 2026

  • Version alignment with @abpjs/core

v2.0.0​

January 2026

  • Version alignment with @abpjs/core

v1.1.0​

January 2026

  • Version alignment with @abpjs/core

v1.0.0​

January 2026

  • Version alignment with @abpjs/core

v0.9.0​

January 2026

Deprecations​

  • Profile component - Moved to @abpjs/theme-shared (see Profile docs)
  • ChangePassword component - Moved to @abpjs/theme-shared (see Profile docs)
warning

Imports from @abpjs/theme-basic will continue to work but are deprecated.

v0.8.0​

January 2026

  • Version alignment with @abpjs/core

v0.7.6​

January 2026 - Initial Release

  • LayoutApplication component
  • LayoutAccount component
  • LayoutEmpty component
  • Navigation system with permission support
  • Profile component
  • ChangePassword component