Components Overview

Component	Description
APICall	`APICall` creates, updates or deletes data on the backend, versus `DataSource` which fetches data. Unlike DataSource, APICall doesn't automatically execute - you must trigger it manually with the `execute()` method, typically from form submissions or button clicks.
App	The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.
AppHeader	`AppHeader` defines the top navigation bar of your application within the `App` component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior.
AppState	`AppState` is an invisible component that provides global state management across your entire application. Unlike component variables that are scoped locally, AppState allows any component to access and update shared state without prop drilling.
AutoComplete	`AutoComplete` is a searchable dropdown input that allows users to type and filter through options, with support for single or multiple selections. Unlike a basic `Select`, it provides type-ahead functionality and can allow users to create new options.
Avatar	`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
Backdrop	The `Backdrop` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.
Badge	`Badge` displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization.
BarChart	`BarChart` displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories.
Bookmark	As its name suggests, this component places a bookmark into its parent component's view. The component has an `id` that you can use in links to navigate (scroll to) the bookmark's location.
Breakout	The `Breakout` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width.
Button	`Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels.
CHStack	This component represents a stack that renders its contents horizontally and aligns that in the center along both axes.
CVStack	This component represents a stack that renders its contents vertically and aligns that in the center along both axes.
Card	`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.
ChangeListener	`ChangeListener` is an invisible component that watches for changes in values and triggers actions in response. It's essential for creating reactive behavior when you need to respond to data changes, state updates, or component property modifications outside of normal event handlers.
Checkbox	`Checkbox` allows users to make binary choices with a clickable box that shows checked/unchecked states. It's essential for settings, preferences, multi-select lists, and accepting terms or conditions.
ColorPicker	`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.
Column	`Column` defines the structure and behavior of individual table columns within a `Table` component. Each Column controls data binding, header display, sorting capabilities, sizing, and can contain any XMLUI components for rich cell content.
ContentSeparator	`ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.
DataSource	`DataSource` fetches and caches data from API endpoints, versus `APICall` which creates, updates or deletes data.
DateInput	`DateInput` provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars.
DatePicker	`DatePicker` provides an interactive calendar interface for selecting single dates or date ranges, with customizable formatting and validation options. It displays a text input that opens a calendar popup when clicked, offering both keyboard and mouse interaction.
DonutChart	A derivative of PieChart with a hollow center. Note that the height of the component or its parent needs to be set explicitly.
DropdownMenu	`DropdownMenu` provides a space-efficient way to present multiple options or actions through a collapsible interface. When clicked, the trigger button reveals a menu that can include items, separators, and nested submenus, making it ideal for navigation, action lists, or any situation requiring many options without permanent screen space.
EmojiSelector	`EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set.
ExpandableItem	`ExpandableItem` creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the `summary` the content expands or collapses.
FileInput	`FileInput` enables users to select files from their device's file system for upload or processing. It combines a text field displaying selected files with a customizable button that opens the system file browser. Use it for forms, media uploads, and document processing workflows.
FileUploadDropZone	`FileUploadDropZone` enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI.
FlowLayout	`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.
Footer	`Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles.
Form	`Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.
FormItem	`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.
FormSection	`FormSection` groups elements within a `Form`. Child components are placed in a FlowLayout.
Fragment	`Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components.
H1	Represents a heading level 1 text
H2	Represents a heading level 2 text
H3	Represents a heading level 3 text
H4	Represents a heading level 4 text
H5	Represents a heading level 5 text
H6	Represents a heading level 6 text
HSplitter	`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.
HStack	This component represents a stack rendering its contents horizontally.
Heading	`Heading` displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with TableOfContents.
IFrame	`IFrame` embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration.
Icon	`Icon` displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators.
Image	`Image` displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions.
Items	`Items` renders data arrays without built-in layout or styling, providing a lightweight alternative to `List`. Unlike `List`, it provides no virtualization, grouping, or visual formatting — just pure data iteration.
LabelList	`LabelList` adds custom data labels to chart components when automatic labeling isn't sufficient. It's a specialized component for advanced chart customization scenarios where you need precise control over label positioning and appearance.
Legend	`Legend` provides a standalone legend for chart components when you need custom positioning or styling beyond the chart's built-in `showLegend` property. Most charts can display legends automatically, but this component offers precise control over legend placement and alignment.
LineChart	`LineChart` displays data as connected points over a continuous axis, ideal for showing trends, changes over time, or relationships between variables. Use it time series data, progress tracking, and comparing multiple data series on the same scale.
Link	`Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.
List	`List` is a high-performance, virtualized container for rendering large datasets with built-in grouping, sorting, and visual formatting. It only renders visible items in the viewport, making it ideal for displaying thousands of records while maintaining smooth scrolling performance.
Logo	`Logo` displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (`logo`, `logo-dark`), this component provides direct control when you need custom logo placement or templating.
Markdown	`Markdown` renders formatted text using markdown syntax. Use Text for simple, styled text content, and `Markdown` when you need rich formatting.
MenuItem	`MenuItem` represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems.
MenuSeparator	`MenuSeparator` displays a separator line between menu items to group related menu options within `DropdownMenu`.
ModalDialog	`ModalDialog` creates overlay dialogs that appear on top of the main interface, ideal for forms, confirmations, detailed views, or any content that requires focused user attention. Dialogs are programmatically opened using the `open()` method and can receive parameters for dynamic content.
NavGroup	`NavGroup` creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups `NavLink` components and other `NavGroup` components, providing expandable submenus with customizable icons and states.
NavLink	`NavLink` creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed.
NavPanel	`NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.
NoResult	`NoResult` displays a visual indication that a query or search returned nothing.
NumberBox	`NumberBox` provides a specialized input field for numeric values with built-in validation, spinner buttons, and flexible formatting options. It supports both integer and floating-point numbers, handles empty states as null values, and integrates seamlessly with form validation.
Option	`Option` defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within Select, AutoComplete, and other selection components.
Page	`Page` defines route endpoints within an application, mapping specific URL patterns to content that displays when users navigate to those routes. Each Page represents a distinct view or screen in your single-page application's routing system.
PageMetaTitle	`PageMetaTitle` dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles.
Pages	`Pages` serves as the routing coordinator within an App, managing which Page displays based on the current URL.
Pagination	`Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.
PasswordInput	`Password` is a specialized TextBox that enables users to input and edit passwords.
PieChart	`PieChart` visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly.
ProgressBar	`ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).
Queue	`Queue` manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display.
RadioGroup	`RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.
RealTimeAdapter	`RealTimeAdapter` is a non-visual component that listens to real-time events.
Redirect	`Redirect` immediately redirects the browser to the URL in its `to` property when it gets visible (its `when` property gets `true`). It works only within App, not externally.
Select	`Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration.
Slider	`Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.
Slot	Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered.
SpaceFiller	`SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used.
Spinner	`Spinner` is an animated indicator that represents an action in progress with no deterministic progress value.
Splitter	`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.
Stack	`Stack` is the fundamental layout container that organizes child elements in configurable horizontal or vertical arrangements. As the most versatile building block in XMLUI's layout system, it provides comprehensive alignment, spacing, and flow control options that serve as the foundation for all specialized stack variants.
StickyBox	`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.
SubMenuItem	`SubMenuItem` creates hierarchical menu structures by acting as both a menu item and a container for nested menu items. When clicked or hovered, it reveals a submenu containing additional MenuItem, MenuSeparator, or other SubMenuItem components, enabling complex multi-level navigation and action organization.
Switch	`Switch` enables users to toggle between two states: on and off.
TabItem	`TabItem` defines individual tabs within a Tabs component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections.
Table	`Table` presents structured data for viewing, sorting, selection, and interaction.
TableOfContents	`TableOfContents` component collects Heading and Bookmark within the current page and displays them in a navigable tree.
Tabs	`Tabs` enables users to switch among content panels using clickable tab headers. It provides an efficient way to present multiple related sections in a single interface area, with each tab containing distinct content defined by TabItem components.
Text	The `Text` component displays textual information in a number of optional styles and variants.
TextArea	`TextArea` provides a multiline text input area.
TextBox	`TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints.
Theme	`Theme` creates styling contexts to customize the appearance of nested components without using CSS.
TimeInput	`TimeInput` provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds.
Timer	`Timer` is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event.
ToneChangerButton	`ToneChangerButton` enables the user to switch between light and dark modes.
ToneSwitch	`ToneSwitch` enables the user to switch between light and dark modes using a switch control.
Tooltip	A tooltip component that displays text when hovering over trigger content.
VSplitter	`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.
VStack	This component represents a stack rendering its contents vertically.