# AstrolUI

> AstrolUI is a Blazor component library for .NET 10 (WebAssembly and Server): layout with side menu, buttons,
> forms, grid, modal, notifications, theme switcher, plus packages for HTTP repositories, PDF viewer, charts,
> diagram board and rich text. NuGet feed: https://nuget.astrolui.com/v3/index.json (package prefix `Astrol.`).

Notes for AI assistants:
- Register the services with `builder.Services.AddAstrolBasic()` and use `AstrolLayoutMenu` as the layout root.
- Theme: `AstrolTheme` (Yellow, Orange, Red, Green, Blue, Purple) and `AstrolThemeMode` (Light, Dark, Auto); style your own CSS with the `--aui-*` variables.
- Fields are not styled globally: wrap them in `AstrolContentInput` or add the `aui-input` class.
- Checkboxes, radios and tabs: `AstrolCheckbox`, `AstrolRadioGroup` + `AstrolRadio`, `AstrolTabs` + `AstrolContentTab` (all with `@bind-Value` / `@bind-ActiveTabIndex`), not native inputs.
- Feedback and actions: `AstrolAlert` (in-page message), `AstrolBadge` (status label), `AstrolTooltip` (help on hover/focus), `AstrolDropdown` + `AstrolDropdownItem` (actions menu); status colors come from `AstrolStatus`.
- Notifications: `IAstrolToast`; dialogs: `IAstrolModal` (`ShowAsync`, `ConfirmAsync`).
- Icons are `astrol-*` CSS classes.
- Code written for older AstrolUI versions: follow the migration guide below.

## Getting started

- [AstrolUI](https://doc.astrolui.com/ai/index.txt): If you're looking to streamline development with .Net and Blazor using this technology in the lightest way possible, our free components will provide the perfect solution to boost your project.
- [Installation](https://doc.astrolui.com/ai/basic-component-installation.txt): Install the Astrol.Component.Basic package from the AstrolUI NuGet. Add in the NuGet Package Manager Settings of your Visual Studio.
- [For AI](https://doc.astrolui.com/ai/for-ai.txt): AstrolUI documentation for AI: llms.txt, llms-full.txt and every page in Markdown with its real code, so Claude, Copilot or Cursor write correct AstrolUI code.
- [License](https://doc.astrolui.com/ai/license.txt): AstrolUI license: Basic, PDFViewer, Charts, RichText and Repository are free for personal and commercial projects; Board requires a commercial license.
- [Overview](https://doc.astrolui.com/ai/overview.txt): The basic components together, as in a real screen: buttons, tags, form, file upload, grid, confirmation and notifications.
- [Theme](https://doc.astrolui.com/ai/theme.txt): AstrolUi offers a vibrant color palette for .Net Blazor, where each color represents a unique theme. It allows for 100% customization, enabling you to personalize the themes according to your preferences.
- [What's new](https://doc.astrolui.com/ai/whats-new.txt): What's new in AstrolUI for .NET 10: lighter and faster, notification and modal services, automatic mode, accessibility and migration guide.

## Form components

- [Checkbox](https://doc.astrolui.com/ai/form-checkbox.txt): AstrolCheckbox: Blazor checkbox on top of the native input, with @bind-Value, intermediate state, disabled state and EditForm validation.
- [ComboBox](https://doc.astrolui.com/ai/form-combo-box.txt): AstrolComboBox is an interactive component that combines a text box with a dropdown list, allowing you to select an option from a variety of elements. Whether it's for filtering options, facilitating data entry, or providing contextual selections, AstrolComboBox stands as an elegant solution to enhance the user experience, offering flexibility and efficiency in interaction.
- [ContentInput](https://doc.astrolui.com/ai/form-content-input.txt): AstrolContentInput wraps an input, textarea or select (also InputText, InputSelect...) and gives it the AstrolUI look: border, height, hover and a focus ring in the theme color, with an optional icon button.
- [InputPassword](https://doc.astrolui.com/ai/form-inputs-password.txt): AstrolInputPassword focuses on privacy and security by hiding characters while the user types. By providing an additional level of confidentiality, it is ideal for forms and authentication processes where protecting sensitive information is paramount.
- [Label](https://doc.astrolui.com/ai/form-label.txt): AstrolLabel is an essential component in the user interface, designed to provide descriptive information and enhance the understanding of associated elements.
- [Radio](https://doc.astrolui.com/ai/form-radio.txt): AstrolRadioGroup and AstrolRadio: Blazor radio options on top of the native input, of any type, in a column or a row, with @bind-Value and EditForm validation.
- [Toggle](https://doc.astrolui.com/ai/form-toggle.txt): AstrolToggle is an accessible switch to turn an option on or off with a click or from the keyboard.

## Basic components

- [Alert](https://doc.astrolui.com/ai/basic-component-alert.txt): AstrolAlert: in-page Blazor messages with a status (info, success, warning, error, brand), title, actions and close button; accessible with role alert or status.
- [Assign](https://doc.astrolui.com/ai/basic-component-assign.txt): AstrolAssign is a component with a two-column interface that represents two sets of items. Users can move items between the columns with the action buttons in the center of the component. It is ideal for assigning items or changing their state intuitively, and is commonly used to manage resources, tasks or data between two sets.
- [Badge](https://doc.astrolui.com/ai/basic-component-badge.txt): AstrolBadge: Blazor status labels (active, pending, blocked...) colored by meaning, with an icon or a dot, and an outline variant.
- [Box](https://doc.astrolui.com/ai/basic-component-box.txt): AstrolBox is a rectangular Blazor component that can contain other elements, such as text, images or forms. It is commonly used to organize and structure the web layout.
- [Breadcrumb](https://doc.astrolui.com/ai/basic-component-breadcrumb.txt): AstrolBreadcrumb is a Blazor component for visual navigation that displays the user's path to the current page.
- [Button](https://doc.astrolui.com/ai/basic-component-button.txt): AstrolButton is an essential Blazor component in applications and websites, providing a clear and visually prominent way for users to initiate actions or processes.
- [Confirm](https://doc.astrolui.com/ai/basic-component-confirm.txt): AstrolConfirm is the Blazor component that allows obtaining user confirmation before performing a critical or irreversible action.
- [Dropdown](https://doc.astrolui.com/ai/basic-component-dropdown.txt): AstrolDropdown: Blazor actions menu with icons, shortcuts, disabled or dangerous options, links, separators and keyboard support; grids and modals don't clip it.
- [.NET extensions](https://doc.astrolui.com/ai/basic-component-extensions.txt): C# extension methods included in AstrolUI: accent-insensitive search, slugs, money, file sizes, relative time, paging and sorting for EF Core, color contrast and more.
- [Grid](https://doc.astrolui.com/ai/basic-component-grid.txt): AstrolGrid is a Blazor component used to represent information, providing a grid system to display organized data using rows and columns. It allows for essential functionalities such as applying filters, sorting, pagination, and more.
- [Icon](https://doc.astrolui.com/ai/basic-component-icon.txt): AstrolIcon is a Blazor component that visually represents an icon. It is used to convey visual information to the user, such as actions, objects, or ideas in general.
- [JS utilities](https://doc.astrolui.com/ai/basic-component-js-interop.txt): Astrol.JSInterop.Base for Blazor: typed localStorage and sessionStorage (with obfuscated values), copy to clipboard, file downloads, time zone, language, media queries and logout on inactivity.
- [LayoutMenu](https://doc.astrolui.com/ai/basic-component-layout-menu.txt): AstrolLayoutMenu is a Blazor component designed to completely replace the content of MainLayout.
- [Load](https://doc.astrolui.com/ai/basic-component-load.txt): AstrolLoad and PartialLoad are Blazor components that display a loading animation, over the whole page or over a parent container, to show the user that a response is pending after an action.
- [MenuAdmin](https://doc.astrolui.com/ai/basic-component-menu-admin.txt): AstrolMenuAdmin is a Blazor component intended to be used within the template, but it can also be encapsulated within any component. It's important to note that it takes up 100% of the width within its parent component.
- [Modal](https://doc.astrolui.com/ai/basic-component-modal.txt): AstrolModal is a Blazor component used to generate a popup window on the page to display additional content, allowing advanced interaction with the user.
- [Notification](https://doc.astrolui.com/ai/basic-component-notification.txt): The Notification component in Blazor allows you to inform users about relevant events. These visual alerts appear temporarily on the screen and can contain information about events, interactions, or important reminders.
- [Pagination](https://doc.astrolui.com/ai/basic-component-pagination.txt): AstrolPagination: Blazor pagination with page, page size and total items.
- [Tabs](https://doc.astrolui.com/ai/basic-component-tabs.txt): AstrolTabs: Blazor tabs with icons, badges, disabled tabs, keyboard (arrows, Home, End), @bind-ActiveTabIndex and panels that keep their state.
- [ThemeSwitcher](https://doc.astrolui.com/ai/basic-component-theme-switcher.txt): AstrolThemeSwitcher: theme color and light, dark or automatic mode selector for Blazor.
- [Title](https://doc.astrolui.com/ai/basic-component-title.txt): AstrolTitle is a Blazor component that allows setting the title of the current page at the interface level within the body and at the browser level. It also allows setting elements for the header and metadata of the current page.
- [Tooltip](https://doc.astrolui.com/ai/basic-component-tooltip.txt): AstrolTooltip: Blazor help text that appears on hover or keyboard focus, in four positions, accessible (aria-describedby) and never clipped by grids or modals.
- [UploadFile](https://doc.astrolui.com/ai/basic-component-upload-file.txt): AstrolUploadFile is a Blazor component that provides the logic for browsing files in the explorer, copying and pasting, as well as dragging and dropping files into the defined area. It also allows for the removal of uploaded files before they are saved.

## Packages

- [AstrolBoard](https://doc.astrolui.com/ai/board-component.txt): AstrolBoard: interactive Blazor board from AstrolUI with boxes you drag and resize, relations with vertices, zoom, mini-map, search, context menus, undo/redo and optional guides; smooth even with hundreds of elements.
- [Board · Examples](https://doc.astrolui.com/ai/board-example.txt): AstrolBoard: interactive Blazor board from AstrolUI with boxes you drag and resize, relations with vertices, zoom, mini-map, search, context menus, undo/redo and optional guides; smooth even with hundreds of elements.
- [Installation](https://doc.astrolui.com/ai/board-installation.txt): AstrolBoard: interactive Blazor board from AstrolUI with boxes you drag and resize, relations with vertices, zoom, mini-map, search, context menus, undo/redo and optional guides; smooth even with hundreds of elements.
- [Board · Performance](https://doc.astrolui.com/ai/board-performance.txt): AstrolBoard: interactive Blazor board from AstrolUI with boxes you drag and resize, relations with vertices, zoom, mini-map, search, context menus, undo/redo and optional guides; smooth even with hundreds of elements.
- [AstrolChart](https://doc.astrolui.com/ai/chart-chart-component.txt): AstrolChart: Blazor charts from AstrolUI based on ApexCharts. Lines, areas, bars, circular, radar, heatmaps, ranges, candlesticks and more, with C# data and the AstrolUI light/dark theme.
- [Charts · Basic charts](https://doc.astrolui.com/ai/chart-examples-basic.txt): Lines, areas, columns, horizontal bars, stacked and mixed charts.
- [Charts · Circular charts](https://doc.astrolui.com/ai/chart-examples-circular.txt): Pie, donut, polar area, radial bars and gauge.
- [Charts · Interaction](https://doc.astrolui.com/ai/chart-examples-interaction.txt): Dates with zoom, annotations, events and changing data, custom tooltip and export to image.
- [Charts · Other types](https://doc.astrolui.com/ai/chart-examples-more.txt): Radar, scatter, bubbles, heatmap and treemap.
- [Charts · Ranges and finance](https://doc.astrolui.com/ai/chart-examples-ranges.txt): Timeline (Gantt), range area, candlesticks and box plot.
- [Installation](https://doc.astrolui.com/ai/chart-installation.txt): AstrolChart: Blazor charts from AstrolUI based on ApexCharts. Lines, areas, bars, circular, radar, heatmaps, ranges, candlesticks and more, with C# data and the AstrolUI light/dark theme.
- [Installation](https://doc.astrolui.com/ai/pdf-viewer-installation.txt): AstrolPDFViewer is a highly efficient and customizable Blazor component for PDF visualization, offering both traditional and modern options with great configurability and lightweight design.
- [PDFViewer](https://doc.astrolui.com/ai/pdf-viewer-pdf-viewer-component.txt): AstrolPDFViewer is a highly efficient and customizable Blazor component for PDF visualization, offering both traditional and modern options with great configurability and lightweight design.
- [Repository](https://doc.astrolui.com/ai/repository.txt): Astrol.Shared.Repository is the AstrolUI HTTP client for Blazor: Get, Post, Put, Patch, Delete and file uploads with a response that always tells you whether it failed, the HTTP status and the server message.
- [Installation](https://doc.astrolui.com/ai/rich-text-installation.txt): AstrolRichText is a dynamic Blazor component that elevates the presentation of textual content to new heights. Unlike a simple text field, it allows for advanced formatting such as bold, italic, numbered or bulleted lists, enriching expression and style. This versatile tool is particularly useful for creating diverse content, from blog entries to detailed documents, providing users with the ability to express themselves with greater flexibility and expressiveness. Content creation becomes more intuitive and visually appealing.
- [RichText](https://doc.astrolui.com/ai/rich-text-rich-text-component.txt): AstrolRichText is a dynamic Blazor component that elevates the presentation of textual content to new heights. Unlike a simple text field, it allows for advanced formatting such as bold, italic, numbered or bulleted lists, enriching expression and style. This versatile tool is particularly useful for creating diverse content, from blog entries to detailed documents, providing users with the ability to express themselves with greater flexibility and expressiveness. Content creation becomes more intuitive and visually appealing.

## Other

- [PERENDER](https://doc.astrolui.com/ai/perender.txt): PERENDER: rendering and caching engine that makes SPAs (Blazor, Angular, React...) indexable for search engines, AI and social networks, with articles, categories, hosted sitemaps and indexing rules.

## Optional

- [Migration guide](https://doc.astrolui.com/ai/migration.txt): every breaking change of the .NET 10 refactor with before/after code
- [Full documentation](https://doc.astrolui.com/llms-full.txt): all the pages above in one file