• Global CSS: from 220 KB in 4 chained files (with bootstrap) to 68 KB in a single file (15 KB compressed).
• interact.js (126 KB) is no longer loaded: drag and resize are native and only downloaded when used.
• Icons: a 24 KB core with the component icons and the most common ones; the rest (145 KB) is only downloaded when a page uses one.
• On-demand JavaScript: each component (modal, combo, editor…) loads its module only when it appears.
• NuGet package for Basic: from 1,921 KB to 347 KB, now including the new components (tabs, checkbox, radio, dropdown, tooltip, alerts and badges). Details for each package in Installation.
• Grid: no longer copies the data or uses one component per cell. With 2,000 rows, re-rendering the page goes from 16 ms to 0.9 ms, sorting from 476 ms to 47 ms and filtering from 379 ms to 36 ms.

• IAstrolToast: notifications from code (Toast.Success("Saved")), rendered by Blazor, pausing on hover and following the theme. See Notification.
• IAstrolModal: await Modal.ConfirmAsync(...) and await Modal.ShowAsync<Component>(...) with a result, without @ref. See Confirm.
• Automatic mode: the theme follows the operating system light or dark mode and changes live; notifications and browser controls follow the theme too. See Layout menu.
• Grid: typed Field and nested paths, Format, Virtualize, and column width is kept when paging. See Grid.
• ComboBox: Display="p => p.Name" and @bind-Value; opens upwards when there is no room and works inside grids and modals. See ComboBox.
• Modal as a native <dialog>: always on top, Esc and focus handled by the browser.
• Texts in the app language (English or Spanish) and AstrolText.Resolver to translate into other languages.
• GetColorContrast(): picks the text color with the best contrast over a background.

// Program.cs

builder.Services.AddAstrolBasic();

// Page or component

@inject IAstrolToast Toast

@inject IAstrolModal Modal

if (await Modal.ConfirmAsync("Are you sure?", "The item will be deleted."))

{

 await Delete(item);

 Toast.Success("Deleted");

}

var result = await Modal.ShowAsync<EditUser>("Edit", new Dictionary<string, object?> { ["Id"] = 5 });

if (!result.Cancelled) { var user = result.GetData<User>(); }

• Every control can be used with the keyboard: real buttons in modals, menu, paging, sortable headers and filters; the menu uses real links (Ctrl+click opens a new tab).
• Visible focus with the theme color when navigating with Tab.
• Screen reader labels (aria-label, aria-sort, aria-expanded, table roles, alerts).
• Respects the operating system reduce motion setting.
• Security: notifications and menu names are plain text by default (no HTML injection).

1. Program.cs: replace services.AddScoped<AstrolJSInterop>() with services.AddAstrolBasic() (using Astrol.Component.Basic;).
2. index.html / _Host.cshtml:
   • Remove _content/Astrol.Component.Basic/js/interact.min.js (if you use Board, change it to _content/Astrol.Component.Board/js/interact.min.js).
   • RichText paths move from Astrol.Component.Basic to Astrol.Component.RichText.
   • If your app uses bootstrap classes, reference bootstrap yourself.
   • Remove standalone links to fontello.min.css and animation.min.css: they are now inside astrol-basic.min.css.
3. Notifications with HTML: they are now plain text. Replace <br /> with \n or use AllowHtml = true with trusted content. Same for MenuItem.Name (NameIsHtml = true).
4. ConvertByteToMB() now returns MB (it returned KB); use ConvertBytesToKB() for KB.
5. Grid: if you used <Columns Context="x">, move Context to each <Column>; the Load parameter is gone.
6. Themes without AstrolLayoutMenu: add data-aui-color and data-aui-mode where you set the class (e.g. green-dark-mode).
7. Custom CSS on internal elements (.head-astrol-modal i, .page-item a, #_pageInput…): they are now buttons with classes; review your selectors.
8. Optional: move from jsI.Notification(...) to IAstrolToast and from <AstrolConfirm @ref> to IAstrolModal.ConfirmAsync.

The full guide, with every change, how to detect it (regular expressions) and before/after examples, is in the repository at docs/refactor/MIGRATION.md; it is written so an AI can also apply it to your project.

// ---- before ----

services.AddScoped<AstrolJSInterop>();

await jsI.Notification("Saved <br/> successfully".NotificationSuccess());

var ok = await _conf.Confirmation("Are you sure?", "Message"); // <AstrolConfirm @ref="_conf" />

// ---- now ----

services.AddAstrolBasic();

Toast.Success("Saved\nsuccessfully");

var ok = await Modal.ConfirmAsync("Are you sure?", "Message");

<!-- before -->

<script src="_content/Astrol.Component.Basic/js/interact.min.js"></script>

<script src="_content/Astrol.Component.Basic/js/astrol-rich-text.min.js"></script>

<!-- now: interact is no longer needed (except with Board); RichText in its own package -->

<script src="_content/Astrol.Component.RichText/js/astrol-rich-text.min.js"></script>