chakra-ui/ark

Features

• Prebuilt UI Components - Provides a comprehensive library of ready-made, unstyled UI components that can be inserted into any application.
• Finite State Machine Controllers - Governs component logic through explicit states and transitions, ensuring predictable and testable interactive behavior.
• Seamless Scrolling Loops - Provides a component that scrolls content in a continuous, seamless loop without user interaction for displaying announcements or rotating information.
• Secure Text Inputs - Provides a password input component with character masking and accessibility support.
• Unified Collection Abstractions - Provides a unified collection abstraction for managing hierarchical and flat data sets in UI components.
• Component State Injectors - Provides a context-based state propagation model that lets any child component read and modify a parent's internal state via hooks and providers.
• Hierarchical Data Structures - Provides a collection abstraction for managing hierarchical data with traversal and manipulation methods.
• Accessibility ID Coordination - Coordinates shared identifiers between components to produce correct ARIA bindings and interaction behavior.
• Context State Propagators - Distributes component state and methods through provider components and hooks for external control and child access.
• Accessible Component Libraries - Delivers WAI-ARIA compliant components with keyboard navigation, focus management, and screen-reader support.
• Accessible Form Controls - Provides composable field wrappers that attach ARIA labels, helper text, and error messages to form controls.
• Checkbox Groups - Provides a checkbox group component with shared state, selection limits, and select-all.
• Collapsible State Controllers - Exposes a hook and provider that let parent components read and write the collapsible's open/close state from outside the component tree.
• Form-Integrated - Handles form-related state, ARIA attributes, error messages, and hidden input for seamless use with form libraries.
• Visual Color Pickers - Provides a fully accessible, keyboard-navigable visual color picker with area, sliders, and swatches.
• Combobox Components - Provides headless combobox components with custom rendering, router integration, and type-safe wrappers.
• Component Composition Primitives - Allows consumers to replace a primitive's rendered element with a custom component while preserving behavior and accessibility.
• Pin Input State Controllers - Ships a provider/hook that lets parent components read and write the pin input's value, error, and focus state from outside the component.
• Headless - Replaces an Ark component's default DOM element with a custom component that inherits all its behavior, styling, and accessibility.
• Headless Slot Substitutions - Substitutes a custom component for a standard framework part while preserving its interactive and accessibility behaviors.
• Cross-Framework Components - Offers identical component APIs and behavior across React, Solid, Vue, and Svelte for a unified design system.
• Configurable Slideshows - Provides a carousel component with autoplay, looping, orientation, slides per page, spacing, variable slide widths, and snap alignment.
• Multi-Mode Date Selection - Provides a date picker component supporting single, range, and multiple selection modes with constraints and localization.
• External Component State Hooks - Exposes hooks and providers to control collapsible state, reflecting the library's context-based state propagation pattern.
• File Uploaders - Lets users choose files from their device via button, drag-and-drop, pasting, camera capture, or directory selection, and then submits them.
• Accessible Combobox Form Integrations - Handles ARIA labels, helper text, and error messages for accessible combobox form fields.
• Form Field State Integrations - Handles form field states, validation cues, ARIA attributes, and integration with external form libraries.
• Form Fieldsets - Provides form fieldsets for grouping related form controls under a common legend for semantic structure and accessibility.
• Framework Agnostic UI Logic - Provides identical component APIs and state management across React, Solid, Vue, and Svelte for behavioral consistency.
• Accessible Form Patterns - Provides accessible form patterns with semantic markup and labeling for assistive technology integration.
• Hierarchical Menu Organization - Organizes menu items into labeled groups and nested submenus for hierarchical navigation.
• Hover Card Displays - Provides a hover card component that reveals contextual content when the user hovers over a trigger.
• List Collection Builders - Provides a collection abstraction that builds a structured, traversable data set from a plain array for use in list, select, and tree components.
• Modal Dialogs - Ships a modal dialog component with configurable focus, scroll, and dismissal behavior.
• Alert Dialogs - Ships an alert dialog that forces explicit dismissal and focuses the safest action.
• Select Inputs - Provides headless select inputs with single and multiple selection, keyboard navigation, and ARIA support.
• Single-Select Inputs - Provides single-select input components with full keyboard navigation and WAI-ARIA accessibility.
• Pagination Controls - Provides pagination controls with data slicing, range display, and dynamic page size.
• Numeric Input Fields - Provides a numeric input component with min/max limits, decimal precision, and locale-aware formatting.
• Popover Overlays - Ships a popover overlay component with keyboard and programmatic open/close support.
• Positioned Popovers - Positions the popover via placement options, same-width matching, anchor targeting, and an arrow indicator.
• Modal Overlays - Opens a focused dialog overlay that captures user interaction with configurable open, close, and focus behavior.
• Non-Modal Overlays - Provides a dialog variant that disables focus trapping and scroll prevention, allowing users to interact with background content while the overlay is open.
• External State Controllers - Provides a universal provider/hook pattern that lets any parent component read and write the state of a child component from outside its tree.
• Pagination Navigation - Builds a pagination interface with page buttons, size control, and range display using headless state primitives.
• Headless Pagination Primitives - Delivers headless pagination primitives with stateful page management and automatic data slicing.
• Popup Menu Triggers - Provides popup menus that open on click, right-click, or long-press triggers.
• State Management - Manages popover visibility via controlled props or hooks, enabling external toggling and programmatic closure.
• State Machine-Driven Component Logic - Uses finite state machines to govern component logic, producing type-safe, testable, and bug-resistant interactions.
• Carousel Navigation APIs - Exposes a context-based API and controlled props for managing the carousel's active page from outside the component tree.
• Progress Bars - Provides progress bars as linear indicators for task completion or elapsed time with configurable bounds and indeterminate state.
• Progress Indicators - Provides progress indicators for displaying loading states and task completion status with configurable bounds and orientation.
• Range Sliders - Provides a range slider component with horizontal/vertical orientation, tick marks, and keyboard navigation.
• Scroll Areas - Provides scroll areas with custom scrollbar styling and programmatic control for managing overflowing content.
• Scrollable Containers - Renders a scrollable container with custom-styled scrollbars that supports horizontal, vertical, or both scrolling and nesting.
• Scrolling Text Banners - Provides a component that scrolls content in a continuous loop without gaps for displaying announcements or rotating information.
• Select Dropdowns - Provides a headless dropdown menu component with selectable items, grouping, and selection callbacks.
• Selectable Lists - Manages single and multiple selection states in lists with select, deselect, and toggle operations.
• Multiple Selections - Supports selecting multiple items from a list and displaying them as removable tags.
• Selection Groups - Supports single, multiple, and grouped selections with constraints and select-all.
• Searchable Select Inputs - Provides a searchable combobox with keyboard navigation, autocomplete, grouping, and accessible rendering.
• Selection Management Components - Provides headless components that manage single, multiple, limited, and highlight-triggered selection states.
• Slide-Out Panels - Provides a slide-in panel component with focus trapping and keyboard accessibility.
• Slider State Controllers - Ships a provider/hook pattern that lets parent components read and write the slider's value, orientation, and focus state from outside the slider tree.
• Data-Attribute Styling - Exposes scoped data-* attributes on every component part so consumers can target and style elements with pure CSS without any default styles.
• Unstyled Component Primitives - Provides pre-built UI components with zero default styling and full WAI-ARIA support, including keyboard navigation, focus management, and RTL.
• CSS Styling - Provides headless components that expose data attributes and CSS variables for custom styling without framework lock-in.
• Item Navigation and Selection - Provides a headless menu component that captures item selection and triggers associated actions.
• Headless UI Libraries - Develops unstyled, behavior-focused UI primitives that separate logic from presentation, allowing full control over visual styling.
• Numeric Input Controls - Provides a numeric input component with range validation, step controls, and spinbutton accessibility.
• WAI-ARIA Frameworks - Builds UI component libraries with full WAI-ARIA compliance and unstyled primitives for custom visual design.
• Component Composition - Implements the asChild pattern to merge custom components into headless primitives while preserving behavior and accessibility.
• Headless Element Wrappers - Wraps an HTML element with framework-generated attributes and behaviors so it becomes a first-class framework component.
• DOM Access References - Exposes refs on every headless component so consumers can directly access the underlying DOM node for imperative operations.
• Data Attribute Styling - Exposes scoped data attributes on every component part for CSS targeting of structural and state hooks.
• Form Field State Management - Provides a flexible container that propagates validation and interaction states to child form elements.
• Dialog State Controllers - Provides a context-based API and controlled props for opening, closing, and toggling dialog visibility from outside the component tree.
• Component Library Integrations - Exposes component listings, examples, usage patterns, and styling guidelines so AI agents can generate consistent code.
• Automatic Dependent Propagation - Provides automatic dependent propagation for updating dependents when dependencies change.
• Component Catalog Exposers - Exposes a structured catalog of components, examples, and styling rules so AI agents can generate consistent code.
• Usage Pattern Catalogs - Lists example names for each component to show what usage patterns exist for AI agent reference.
• File Upload - Delivers a file upload component supporting drag-and-drop, validation, previews, and multiple sources.
• Auto-Complete Libraries - Highlights and auto-fills the first matching option as the user types in a combobox.
• Masked Text Inputs - Provides a masked input field for entering sensitive strings such as passwords or API keys.
• List Filtering - Filters list items in real time by applying a filter function to the collection.
• Digital Signature Capture Tools - Provides a headless signature pad component for capturing handwritten signatures.
• UI List Filtering - Filters list items dynamically based on user input via a filter function.
• List Sorting Selectors - Sort items on the client after fetching, or send sort parameters to the server for server-side sorting.
• Date and Time Libraries - Adapts date picker locale, week start, and parsing, and integrates a time input for combined date‑time selection.
• Pagination Data Slicers - Provides a utility that slices a data array to the items for the current page and page size.
• Behavior-Inheriting Wrappers - Wraps a custom component so it inherits the behavior and accessibility of the parent UI component without losing its own styling.
• Multi-Trigger Menu Sharing - Attaches a single menu to multiple triggers and repositions it to whichever trigger is activated.
• Component Usage Snippets - Fetches the source code and usage pattern for a specific component example to guide code generation.
• Runtime Tree Data Managers - Manages hierarchical data in collections with traversal, manipulation, and querying for tree views.
• Signature Exporters - Converts drawn signature paths into image data URLs for preview or submission.
• Signature Previews - Ships a signature pad component that renders a preview image of the drawn signature for user confirmation.
• Image Cropping Tools - Provides an interactive image cropper with controls for zoom, rotation, and aspect ratio adjustment.
• Branded QR Codes - Supports adding an image overlay to QR codes for logos or branding, with configurable position and size.
• Non-Modal Floating Panels - Provides a non-modal floating panel component that allows background interaction.
• QR Code Error Correction Level Selectors - Lets consumers set one of four QR Code error correction levels to balance data density against damage tolerance.
• Input Integrations - Combines password input with real-time strength analysis and visual feedback.
• Real-Time Feedback - Integrates password strength analysis with real-time visual feedback in the input component.
• Virtualized Lists - Ships a virtualized list component for efficiently rendering large datasets in dropdowns and select inputs.
• Optimized Option Lists - Optimizes large option lists with async loading, virtualization, and empty state handling.
• Hover Card State Accessors - Provides hooks and context to access hover card state from child components.
• Structural Navigation - Delivers built-in tree navigation methods for moving between parent, child, and sibling nodes.
• Animation-Aware Unmounting - Provides animation-aware unmounting that delays DOM removal until exit animations complete.
• Angle Inputs - Provides a circular angle input component for selecting degree values via a draggable handle.
• CSS Variable Animators - Drives component animations and transitions using CSS variables that the library exposes per component.
• Asynchronous Data Fetching - Provides asynchronous data fetching mechanisms for retrieving and binding remote data to UI components.
• User Avatars - Ships an avatar component that renders a profile image with automatic fallback to initials or icon.
• Clipboard Copy - Manages copy state and exposes status feedback for copying text to the clipboard via button or programmatic triggers.
• Circular Progress Indicators - Renders a circular progress indicator with configurable range, indeterminate mode, and CSS variable styling.
• Card Positioning Configurations - Provides configurable placement and distance for hover card positioning.
• Collapsible UI Components - Provides collapsible components that expand and collapse content sections with accessibility support.
• Collapsible Content Stacks - Displays content in a vertical stack of collapsible sections that expand and collapse individually.
• Deferred Rendering Collapsibles - Defers collapsible content rendering until first opened and removes it from the DOM when closed to save resources.
• Nested Collapsible Structures - Allows collapsible components to be placed inside one another to build hierarchical disclosure structures.
• Color Pickers - Manages the selected color and open state of the picker programmatically via props or an external hook.
• Custom Primitive Wrappers - Wraps any HTML element or custom component so it behaves like an Ark UI primitive and receives the same API.
• AI-Accessible Component Catalogs - Exposes a structured catalog of components, examples, and styling rules so AI agents generate correct and consistent code.
• Type-Safe Component APIs - Provides type-safe component APIs that preserve full type inference on collection items and event handlers.
• Menu Hierarchies - Supports hierarchical menus with nested submenus and full arrow key navigation.
• Suggestion Menu Control - Exposes menu state and methods via a hook for programmatic open, close, and external control.
• Accordion Panels - Provides an accessible accordion panel component that toggles content visibility in a stacked layout.
• Data List Managers - Includes an async data list component with loading, filtering, sorting, and pagination built in.
• Slideshow Displays - Ships an accessible slideshow component with configurable autoplay, orientation, and slide management.
• Programmatic QR Code Controllers - Exposes a hook and provider that let parent components read and write the QR code's state and methods from outside the component tree.
• Date and Time Pickers - Customizes picker display with multiple months, inline layout, locale, and month/year view.
• Form-Integrated Date-Time Pickers - Provides date-time picker components that integrate with native HTML forms and support combined date and time selection.
• Range Selection Interfaces - Provides a date range selection interface with segment-based input for start and end dates.
• Month and Year Pickers - Switches calendar to month or year picker views for coarse-grained selection.
• Selection Restrictions - Restricts selectable dates via min/max boundaries, unavailable days, and preset shortcuts.
• Date Range Restrictions - Constrains selectable dates using min/max boundaries and a custom validation function.
• Date Selection Components - Renders a calendar interface for single date selection, suitable for form patterns.
• Segmented Date Inputs - Provides a segmented date input component with configurable granularity from day to second.
• Multiple Selection - Supports single, range, and multiple date selection modes controlled by a prop.
• Quick - Provides preset triggers and today buttons in date pickers for fast selection of common or current dates.
• Unstyled Popup Menus - Ships an unstyled, accessible popup menu with selection, grouping, checkables, nested submenus, and multi-trigger support.
• Focus Management - Manages keyboard focus assignment on dialog open and focus restoration on close for accessibility.
• Nested - Enables stacking multiple modal dialogs with depth-aware layering indicators for nested interactions.
• Digital Signature Pads - Captures handwritten signatures on a canvas with form integration and export for submission.
• Externally Controllable Signature Pads - Provides a hook and provider to access the signature pad's state and methods from outside the component.
• Form Field Integrations - Provides a signature pad component with full form field accessibility and state management integration.
• Drawer State Controllers - Manages drawer open state externally using props or a context provider and hook.
• Trigger Coordination - Coordinates multiple trigger elements to open a single dialog and updates content based on the active trigger.
• Asynchronous Option Loading - Loads options asynchronously, defers mounting, virtualizes long lists, and fits dropdowns within the viewport.
• Empty State Placeholders - Provides empty state placeholders for collections with no items.
• Floating Window Components - Provides a draggable, resizable, non-modal floating window component.
• Third-Party Form Library Adapters - Connects Ark UI components with React Hook Form, TanStack Form, and Vee Validate for advanced form state management.
• Control Grouping - Groups related form controls under a shared label and propagates disabled and invalid states to children.
• Form Handling Libraries - Works with popular form state management libraries for complex form logic and validation.
• Checkbox Inputs - Creates an accessible checkbox that integrates with form state and field components for validation and error text.
• List Layout Arrangements - Provides a list layout component that arranges items in a grid with keyboard navigation support.
• Grouped Option Lists - Ships headless combobox and select components that group options into labeled sections.
• Hover Card State Controllers - Ships external state control for hover card open and close behavior.
• Checkable Menu Items - Provides menu items that support checkbox and radio button selection behavior.
• Interactive Menu Items - Provides menu items with checkboxes, radio groups, and links for interactive selection and navigation.
• Verification Code Inputs - Provides a verification code input component with automatic focus shifting and paste support.
• List Item Grouping - Provides list components that group items by property and filter with custom functions.
• Component Inventories - Returns a complete inventory of available components so an AI agent can reference every part.
• List Loading Workflows - Provides list loading workflows for managing transitions from skeleton to actual data in list views.
• Hover Card - Adjusts delay before hover card appears and after cursor leaves the trigger.
• Destructive Action Confirmation Dialogs - Shows an alert dialog for destructive actions that requires explicit dismissal and focuses the safest action.
• Scrubbing Interactions - Implements a scrubbing interaction using the Pointer Lock API for precise numeric value adjustment.
• Grouped Combobox Items - Groups related items in combobox selection lists under labeled categories.
• Entry and Exit Animations - Provides entry and exit animations for component mount and unmount transitions using CSS keyframes.
• Layer Index Stacking - Manages overlay z-index stacking using a CSS variable for correct ordering of nested dialogs and popovers.
• Dismissal Behavior Configurators - Configures popover dismissal via outside click or escape key and enables modal mode with focus trapping.
• Interaction Modality Configurators - Configures close-on-interaction, escape key, modal mode, and proper z-index layering within dialogs.
• Modal Popovers - Provides a modal popover component that traps focus and blocks background interaction.
• Nested Popovers - Allows popovers to be nested with independent open states and positioning for multi-level overlays.
• Nested Dialog Layers - Layers child dialogs on top of parent dialogs with visual styling cues for the interaction depth.
• Password Input Fields - Renders an accessible password input with visibility toggle, autocomplete hints, and password manager suppression.
• OTP Inputs - Provides a sequence of single-character input fields for OTP entry with autocomplete and keyboard navigation.
• PIN Input Components - Provides a segmented PIN input that auto-advances focus and supports paste and keyboard entry for verification codes.
• Context Menu Triggers - Provides context menu components triggered by right-click or long-press interactions.
• Trigger Coordination - Shares a single hover card instance across multiple triggers with repositioning.
• Circular Progress Indicators - Provides a circular progress indicator with determinate and indeterminate modes.
• Progress & Value Indicators - Provides a linear progress indicator with determinate and indeterminate modes, configurable bounds, and accessible labels.
• Form Integrations - Integrates radio groups with native HTML forms via hidden inputs for submission and validation.
• Keyboard Navigations - Implements full keyboard navigation for radio groups with arrow key focus movement and space key selection.
• State Controllers - Provides a radio group component with external state control via a hook and provider pattern.
• Circular Sliders - Provides a circular slider component for selecting angle values within a 0 to 360 degree range.
• Numeric Range Sliders - Provides a range slider with two thumbs for selecting a numeric minimum and maximum value.
• Rating Interfaces - Presents a set of clickable icons for users to assign a rating, with keyboard navigation and form integration.
• Searchable Filter Inputs - Provides searchable filter inputs for filtering lists based on text input with automatic debouncing.
• Native Form Synchronization - Synchronizes custom select components with hidden native form elements for submission.
• Option Grouping - Provides radio group components that enforce mutual exclusivity with full keyboard and ARIA support.
• Single Selection Option Groups - Restricts users to choose exactly one item from a predefined list of mutually exclusive options.
• Select All Toggles - Provides a headless list component with a select-all toggle for bulk item management.
• Show More/Less Components - Provides an interactive component that collapses content to a fixed preview and expands on user interaction.
• Headless Element Factories - Provides a factory to create custom unstyled, accessible elements that behave like library-built primitives.
• Data Attribute Styling Guidelines - Delivers the data attributes and CSS variables used by components so styling follows the defined rules.
• Rich Text Editable Regions - Ships an inline editing component that toggles between display and editable input states.
• Animation Transition Components - Provides animation transition components that manage entry and exit lifecycle using JavaScript hooks.
• Close Confirmation Prompters - Intercepts dialog close attempts to prompt users for confirmation and prevent accidental data loss.
• Calendar Display Configurations - Configures calendar display with multiple months, inline layout, and fixed weeks.
• Dual Input - Ships a date input that lets users type or click a date via a combined segment and calendar interface.
• Rating Inputs - Builds a star-rating input that supports half-star steps, keyboard navigation, and form integration.
• User Confirmation Dialogs - Provides dialog components that intercept close attempts to prompt confirmation before dismissal.
• Dialog Close Interceptors - Intercepts dialog close attempts to display a confirmation prompt for unsaved changes.
• Popover-in-Dialog Integrations - Integrates a popover within a dialog by either unmounting on dialog close or rendering without a portal for proper layering.
• Menu-Dialog Composition - Composes menus with dialogs, ensuring proper cleanup and opening confirmation dialogs from menu items.
• Locale-Aware Value Formatting - Applies locale-aware number formatting using Intl.NumberFormat for currency, decimals, and precision.
• Visibility Toggles - Provides a generic visibility toggle mechanism that preserves component state and DOM structure during collapse.
• Custom Option Entry - Lets users add custom entries to selection lists when no exact match exists.
• Z-Index Management - Coordinates stacking order of dismissible overlays using a shared base z-index and layer index.
• HTML Form Integration - Submits selected date values as part of native HTML forms using a name attribute.
• Infinite Scroll Implementations - Provides infinite scroll implementations for automatically loading additional content as users scroll.
• Section Navigation Libraries - Provides a tab-like navigation component for switching between related sections without leaving the page.
• Programmatic Controllers - Exposes programmatic control over menu open, close, reposition, and highlight state.

Star history