mui/base-ui

Features

• Accessible UI Frameworks - Provides unstyled interface primitives that implement WAI-ARIA standards for screen readers and keyboard navigation.
• Accessible Component Suites - Provides a comprehensive suite of unstyled, accessible UI component primitives built to WAI-ARIA standards.
• Headless UI Components - Provides unstyled interface primitives that decouple behavioral logic from the final visual layer.
• Field Validation - Provides capabilities to validate input values using custom functions and trigger checks on focus, change, or submission.
• Form Validation - Provides imperative and automatic validation for form fields based on focus events or references.
• Custom Validation Functions - Runs synchronous or asynchronous validation functions on fields during submission or change events with optional debouncing.
• Headless Primitives - Provides headless primitives that implement behavioral and accessibility logic without bundled CSS.
• Component State Managers - Implements synchronization between internal component state and external variables via value props and change handlers.
• Portal Renderers - Implements portal rendering to move popup elements to the document root and prevent layout clipping.
• Custom Component Builders - Allows the creation of bespoke interface elements by applying custom styling to behavioral, logic-only primitives.
• Custom UI Components - Allows replacing default elements with custom components using render props while preserving accessibility.
• Dialogs - Links trigger elements to a dialog regardless of their location in the application tree.
• Focus Management - Manages which element receives keyboard focus when a dialog is opened or closed for accessibility.
• Focus Management - Directs keyboard focus to specific targets after interactions and sets the initial point of entry for navigation.
• Label and Control Association - Connects labels to form elements and uses ARIA attributes to ensure screen readers identify custom controls correctly.
• Input Groups - Organizes individual controls like checkboxes or radio buttons with shared labels and descriptions within a field.
• Form Submission Management - Captures form data as native events or objects and manages the submission process to backend APIs.
• Keyboard Navigation - Handles arrow and alphanumeric key inputs to move through the interface according to web accessibility standards.
• Modal Interaction Controls - Manages modal behavioral settings, including focus trapping and page scroll locking while a panel is open.
• Dropdown Menus - Provides accessible dropdown menus with built-in keyboard navigation for action lists.
• Navigation Menus - Creates accessible navigation menus that display content in popups on click or hover.
• Nested Menus - Implements hierarchical menu structures with nested submenus for organizing complex actions.
• Popover Overlays - Provides accessible popovers anchored to trigger elements with integrated focus management.
• Modal Overlays - Implements accessible modal overlays that appear on top of page content and manage user interaction.
• Popup Orchestration - Connects toolbars, menus, and tooltips by wrapping items within shared popup trigger logic.
• Contextual Popups - Manages the visibility and active trigger of popups through external application state.
• Popup Positioning Engines - Aligns popups against triggers or custom elements with built-in collision avoidance, offsets, and automatic flipping.
• Component Styling - Decouples behavioral logic from visuals, allowing any styling engine to control the component's appearance.
• Tabbed Navigation - Controls tab activation and keyboard navigation, including focus looping between tab items.
• Component Appearance Customizers - Enables custom styling of components using CSS classes or state-driven functions without bundled styles.
• Headless UI Libraries - Provides a collection of unstyled, accessible interface primitives that decouple behavioral logic from visual presentation.
• Validation Error Renderers - Renders field-specific validation error messages automatically based on the current validity state of the input.
• WAI-ARIA Frameworks - Ensures accessibility by mapping internal state and keyboard interactions to standardized WAI-ARIA roles and attributes.
• Form Handling - Provides an unstyled framework for building, validating, and managing accessible web forms with integrated error handling.
• Form Foundation Primitives - Offers a suite of unstyled input and validation primitives that handle state and accessibility for web forms.
• UI Component Frameworks - Provides functional UI elements that separate accessibility and state logic from the visual layer for total design flexibility.
• Validation Constraints - Implements input rules using native attributes like required, length, and patterns to ensure form data integrity.
• Large Dataset Optimizations - Provides virtualized list rendering to maintain high performance and smooth scrolling for large datasets.
• List Virtualization - Optimizes the rendering of extensive datasets using virtualization to maintain high frame rates.
• Action Toolbars - Ships toolbar components that manage groups of controls with accessible keyboard navigation and focus looping.
• Button Primitives - Provides unstyled button primitives that handle necessary keyboard interactions for a custom design.
• Custom HTML Elements - Supports swapping the underlying HTML element of a button while maintaining keyboard accessibility.
• Checkbox Groups - Coordinates the shared state across multiple checkboxes as a single functional unit.
• Collapsible Panels - Provides accessible collapsible panels that can be toggled open or closed via a trigger button.
• Combobox Components - Provides accessible combobox components combining text input with selectable dropdown lists and removable chips.
• Command Menubars - Renders a top-level navigation bar for commands with full support for standard keyboard navigation.
• Component Architectures - Exposes APIs for composing modular UI architectures by allowing customization and wrapping of internal component nodes.
• Tooltips - Provides an accessible tooltip that displays advisory text on hover or focus.
• Preview Data Passing - Supports sending custom data payloads from triggers to preview cards to render context-specific content.
• Context Menu Construction - Ships an accessible context menu that appears at the pointer position upon right-clicking.
• Custom Component Injection - Allows replacing default HTML tags in tabbed interfaces with custom elements while preserving accessibility.
• Accordion Panels - Ships accessible, collapsible panel components that support both single and multiple simultaneous expansion logic.
• Dynamic Content Injection - Enables sending payloads from a trigger to a dialog to render dynamic content based on the interaction.
• Nested - Supports opening secondary confirmation dialogs on top of parent dialogs with coordinated backdrop management.
• Portal Rendering - Moves dialog popups to a different part of the DOM tree to prevent clipping and z-index conflicts.
• Render Props - Allows consumers to replace default DOM elements with custom components via render props while preserving internal logic.
• External Triggers - Connects external trigger elements to a drawer's open state using a shared handle.
• Asynchronous Option Loading - Supports fetching selection list items from remote APIs dynamically as the user types.
• Checkbox Inputs - Renders accessible, unstyled checkboxes that support binary states and indeterminate modes.
• Toggle Switches - Implements accessible toggle switch components for capturing binary on/off states.
• Right-To-Left Support - Coordinates right-to-left and left-to-right text directions to ensure accessible layouts for different languages.
• Content Grouping - Provides mechanisms to group related menu items using accessible labels and visual separators.
• Hover Previews - Implements UI elements that reveal rich content previews when triggered by a mouse hover.
• Verification Code Inputs - Renders a multi-slot input field for one-time passwords with masked entry and focus shifting.
• Interface Visibility Controls - Controls the visibility of menus through controlled state values and transition delays.
• Alert Dialogs - Implements an accessible alert dialog that requires a mandatory user response to proceed.
• Select Inputs - Renders an accessible dropdown menu for choosing single or multiple values from a predefined list.
• Multi-Trigger Overlay Associations - Allows a single tooltip to be associated with several elements and render unique content based on the active trigger.
• Nested Navigation Menus - Provides multi-level menu hierarchies for organizing complex application navigation.
• Notification Queues - Provides a system for managing the sequence and auto-dismissal timeouts of multiple notification messages.
• Notification State Management - Provides a central manager to create, update, and close notifications from anywhere in the component tree.
• Asynchronous Notification States - Automatically transitions notifications between loading, success, and error states by tracking the status of a promise.
• Numeric Input Fields - Renders a numeric input that supports manual typing, increment buttons, and mouse-wheel scrubbing.
• Portal Rendering - Moves popup and dialog elements to the document root to prevent layout clipping and z-index conflicts.
• Preview Transition Animations - Provides direction-aware animations for transitioning the position and size of preview cards between triggers.
• Preview Visibility Controllers - Enables external control of a preview card's visibility through application state or imperative method calls.
• Progress Indicators - Provides visual components for displaying loading states and the completion status of long-running tasks.
• Radio Groups - Implements radio group components to coordinate a set of mutually exclusive selection options.
• Radio Inputs - Renders accessible radio inputs with visual indicators and support for custom element styling.
• Range Sliders - Ships range slider components that support single or multiple thumbs for value selection.
• Range Visualizations - Renders graphical representations of numeric values relative to a minimum and maximum range.
• Rendering Overrides - Provides mechanisms to replace default node rendering with custom components while keeping event handlers.
• Option Grouping - Clusters related items under section headings within selection popups to improve scannability.
• Server-Side Validation Integration - Merges errors returned from server-side responses into client-side field states for immediate user feedback.
• Collision Avoidance - Implements logic to automatically reposition popups using flip logic and viewport boundary detection to prevent clipping.
• Multi-Trigger Popups - Opens a single popup from several different trigger elements with dynamic content based on the active trigger.
• Direction-Aware Popup Animations - Implements direction-aware animations to smoothly transition popups between different trigger elements.
• Popup Backdrops - Ships an optional backdrop overlay to visually isolate popups from the rest of the page content.
• Tabbed Interfaces - Provides tabbed interfaces to toggle between related content panels in horizontal or vertical layouts.
• Text Input Primitives - Provides native text input elements with integrated support for controlled states and validation.
• Autocomplete Inputs - Implements autocomplete inputs that provide predictive suggestions and filtered options as users type.
• Anchored Toast Positioning - Positions notifications relative to specific UI elements to provide contextual feedback near the triggering action.
• Swipe-to-Dismiss Gestures - Allows users to dismiss notifications from the screen by swiping them in specified directions.
• Toggle Buttons - Implements an accessible two-state toggle button for switching between on and off states.
• Toggle Groups - Manages the shared state of button series for both single and multiple selection modes.
• Animation Transition Components - Includes wrapper components that manage entry and exit lifecycles using state-based CSS transitions.
• Virtualized List Rendering - Maintains high performance for large datasets by rendering only the items currently visible in the viewport.
• Controlled and Uncontrolled Input Hybrids - Provides a hybrid model that synchronizes internal component defaults with external value props.
• CSS Attribute Selectors - Uses data attributes and CSS variables to target specific component states for precise visual layout.
• Event Default Overrides - Enables developers to intercept and suppress internal component event handlers to implement custom interaction logic.
• Form Data Object Mapping - Captures form values as JavaScript objects upon submission to simplify data transformation.
• Data Visualization Libraries - Unstyled, accessible primitives for design systems.

Star history